.banner {
  $block: unquote("#{&}");
  &--text {
    text-align: center;
    padding: 1em 0.5em;
    @media screen and (min-width: 40.000em) {
      padding: 1em 5%;
    }
    @media screen and (min-width: 64.000em) {
      padding: 1em 8%;
    }
    @media screen and (min-width: 65.313em) {
      padding: 1em 15%;
    }
    @media screen and (min-width: 80.000em) {
      padding: 1em 20%;
    }
    #{$block}__caption {
      display: block;
      visibility: visible;
      padding: 0 $spacer-half;
      @media screen and (min-width: 40.000em) {
        padding: 0 1em;
      }
    }
    #{$block}__title {
      color: $color-purple;
      font-size: $font-x-medium;
      @media screen and (min-width: 62.000em) {
        font-size: $font-x-largest;
      }
    }
    #{$block}__subtitle {
      color: $color-purple;
      font-size: $font-x-medium;
    }
  }
}
