.banner {
  &__content {
    padding-bottom: $banner-content-spacing;
    padding-top: $banner-content-spacing;
    width: 100%;
  }

  &__text-container {
    padding-top: 15px;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: grid-gutter();
  }

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

// 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 {
        height: $baseline * 20;
        object-fit: cover; // needed because of height
        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) {
      img {
        height: $baseline * 30; // forces height to exact Design specifications
        margin: 0 auto;
        max-height: 100%;
      }
    }

    &__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 {
      margin: 0;
      height: $baseline * 30; // forces height to exact Design specifications
    }

    &__wrapper {
      padding-top: $spacing--l;
    }
  }
}

// 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: $banner-content-spacing--l;
      padding-top: $banner-content-spacing--l;
      position: relative;
      width: grid-columns(5, 12);

      // small
      &--s {
        margin-left: grid-columns(1, 12, 1);
        width: grid-columns(5, 12);
      }
      // full width
      &--full-width {
        width: 100%;
      }
    }

    &__text-container {
      padding-top: 130px;
      padding-bottom: 130px;
      flex: 0 0 grid-columns(6, 12);
      width: 100%;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      column-gap: grid-gutter('l');
    }

    &__text-container--s {
      padding-bottom: 100px;
      padding-top: 100px;
    }

    .content-block__title {
      overflow-wrap: normal;
    }

    &__media {
      order: 1;
      right: 0;
    }
    // boxed
    .media-block--boxed {
      align-self: center;
      max-width: grid-columns(6, 12);
      height: $baseline * 40; // forces height to exact Design specifications
    }

    // alternative (swaps order content/media)
    &--alternative {
      .banner__text-container {
        flex: 0 0 grid-columns(6, 12);
        margin-left: auto;
      }
      .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;
      }
    }
  }
}