.banner {
  &__content {
    padding-bottom: $spacing--l;
    padding-top: $spacing--l;
  }

  .content-block__title {
    @include font-style($content-block-title-font-style);
  }
    .content-block__title-s {
      @include font-style($content-block-title-font-style-small);
    }
}

// viewport m
@include viewport--l('inversed') {
  .banner {
    .content-block__description {
      margin-top: $spacing--xs;
    }

    &__media {
      margin-left: -($grid-margin--m);
      margin-right: -($grid-margin--m);

      img {
        width: 100%;
      }

      & + .banner__content {
        padding-top: $spacing--m;
      }
    }
    // limit image size
    &__media:not(.media-block--half-width):not(.media-block--full-width):not(.media-block--boxed-large) {
      max-width: $banner-max-image-width--s;

      img {
        margin: 0 auto;
      }
    }

    &__media:not(.media-block--half-width):not(.media-block--full-width):not(.media-block--boxed-large):not(.media-block--boxed) {
      margin: 0 auto;
    }
    // boxed
    .media-block--boxed {
      border-top: $spacing--l solid transparent; // add border instead of padding/margin to make background color continue & button at 100% height
      margin: 0;
    }
  }
}

// viewport s
@include viewport--m('inversed') {
  .banner__media {
    margin-left: -($grid-margin--s);
    margin-right: -($grid-margin--s);
  }
}

// viewport l
@include viewport--l {
  .banner {
    overflow: hidden;
    position: relative;

    &__wrapper {
      display: flex;
      min-height: $baseline * 47;
    }

    &__content {
      align-self: center;
      padding-bottom: $spacing--xxl;
      padding-top: $spacing--xxl;
      position: relative;
      width: grid-columns(5, 12);
      // small
      &--s {
        margin-left: grid-columns(1, 12, 1);
        width: grid-columns(4, 12);
      }
      // full width
      &--full-width {
        width: 100%;
      }
    }

    .banner__media {
      order: 1;
      right: 0;
    }
    // boxed
    .media-block--boxed {
      align-self: center;
      margin-bottom: $spacing--xxl;
      margin-top: $spacing--xxl;
      max-width: grid-columns(6,12);
    }
    // alternative (swaps order content/media)
    &--alternative {

      .banner__content {
        margin-left: auto;
        order: 1;
      }
      // small
      .banner__content--s {
        margin-left: auto;
        margin-right: grid-columns(1,12);
        padding-left: 0;
        padding-right: calc(2/58 * 100%);
      }

      .banner__media {
        margin-left: 0;
      }

      .media-block--half-width {
        left: 0
      }

      img {
        right: 0;
      }
    }
  }
}
