.banner {
  $block: unquote("#{&}");
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 9999;
  &__content {
    padding: 1em $spacer-inner;
  }
  &__image {
    display: block;
    height: auto;
    width: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: -40px 0;
    background-size: inherit;
    height: 255px;
    @media screen and (min-width: 45.000em) {
      height: 270px;
      color: #000;
      display: inline-block;
      text-transform: uppercase;
      vertical-align: middle;
    }
    @media screen and (min-width: 64.000em) {
      background-position: center 0;
      background-size: cover;
      height: 397px;
    }
  }
  &__caption {
    color: $color-cyan_shade1;
    display: none;
    visibility: hidden;
    margin: 0 auto;
    padding: 1em 5%;
    text-align: center;
    @include for-size(tablet-landscape-up) {
      background: transparent;
      visibility: hidden;
      display: none;
      position: absolute;
      left: 0;
      top: 30%;
      right: 0;
      padding: 1em $spacer-inner;
    }
  }
  &__title, &__subtitle {
   color: $color-cyan_shade1;
   text-transform: uppercase;
   font-weight: 700;
   @include for-size(tablet-landscape-up) {
     font-size: $font-x-large;
   }
  }
   &__subtitle {
     @include for-size(tablet-landscape-up) {
       font-size: $font-x-medium;
     }
   }


  &--main {
    margin: 0;
    max-height: 397px;
    overflow: hidden;
    .banner {
      margin: 0;
      max-height: 397px;
      overflow: hidden;
    }
    #{$block}__caption {
      background: $color-cyan_shade1;
      text-align: left;
      visibility: hidden;
      display: none;
      top: 1em;
      @include for-size(tablet-landscape-up) {
        background: transparent;
        display: none;
        float: right;
        top: 4em;
      }
      @include for-size(desktop-up)  {
        left: 45%;
      }
    }
    #{$block}__title,
    #{$block}__subtitle {
      color: #fff;
      text-align: right;
      text-shadow: 1px 2px 8px #4A4A4A;
      @include for-size(tablet-landscape-up) {
        font-size: $font-x-large;
      }
    }
    #{$block}__title  {
      display: none;
      visibility: hidden;
    }
  }
  &--text {
    background-color: rgba($color-cyan_dark, 1);
    text-align: center;
    padding: 0 0 $spacer-half;
  }
}
