@charset "UTF-8";

// Local variable not for changing.
$_su-hero-height: (
  'xs': 315px,
  'sm': 315px,
  'md': 640px,
  'lg': 640px,
  'xl': 728px,
  '2xl': 728px
) !default;

.su-hero--youtube {

  @include grid-media('md') {
    min-height: map-get($_su-hero-height, 'md');
  }

  @include grid-media('lg') {
    min-height: map-get($_su-hero-height, 'lg');
  }

  @include grid-media('xl') {
    min-height: map-get($_su-hero-height, 'xl');
  }

  min-height: map-get($_su-hero-height, 'xs');

  .su-hero__media {
    iframe {

      @include grid-media('md') {
        height: 100%;
      }

      width: 100%;
    }
  }

}
