Three Teaser: Three Teaser - bg-image

.three-teaser {
  padding: 0 1.5rem;

  @include mq($from: m) {
    padding: 0 3rem;
  }

  @include mq($from: xl) {
    padding: 0 9rem;
  }
}

.three-teaser--blue-light,
.three-teaser--bg-image {
  padding: 5rem 1.5rem;

  @include mq($from: m) {
    padding: 5rem 3rem;
  }

  @include mq($from: xl) {
    padding: 10rem 9rem 8rem;
  }
}

.three-teaser--bg-image {
  background-image: url('../images/backgrounds/bg-three-teaser.jpg');
  background-size: cover;
  color: #fff;

  .body--iframe & {
    @include mq($from: xl) {
      padding: 6rem 9rem;
    }
  }
}

.three-teaser--blue-light {
  background: $color-blue-light;
}

.three-teaser--blue-gray {
  @include mq($from: m) {
    margin-top: -0.1rem;
  }
}

.three-teaser--full-width {
  left: 50%;
  margin-left: -50vw;
  position: relative;
  width: 100vw;
}

.three-teaser__headline {
  color: #fff;
  margin-bottom: 2rem;
}

.three-teaser--blue-gray .three-teaser__headline {
  color: $color-dark;
}

.three-teaser__text {
  margin-bottom: 3rem;
}

.three-teaser__headline + .three-teaser__text {
  margin-top: -1rem;
}

.three-teaser__inner {
  margin: 0 auto;
  max-width: 127rem;
}

.three-teaser__items {
  @include mq($from: m) {
    display: flex;
    margin: 0 -3rem;
  }
}

.three-teaser__item {
  display: block;
  padding: 2rem 0;
  position: relative;

  &:not(:last-child) {
    @include mq($until: m) {
      border-bottom: 1px solid $color-border-gray-light;
    }
  }

  @include mq($from: m) {
    padding: 3rem;
    width: 33.3333%;
  }
}

.three-teaser--blue-light .three-teaser__item {
  &:not(:last-child) {
    @include mq($until: m) {
      border-bottom: 1px solid $color-border-blue-light;
    }
  }
}

.three-teaser--default .three-teaser__item,
.three-teaser--blue-gray .three-teaser__item {
  @include mq($from: m) {
    &::before,
    &::after {
      content: '';
      left: 0;
      opacity: 0;
      position: absolute;
      transition: opacity 0.2s;
      width: 100%;
    }

    &::before {
      background: #fff;
      height: calc(100% - 5rem);
      top: 0;
    }

    &::after {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + #fff + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
      background-position: right bottom;
      background-size: auto 100%;
      bottom: 0;
      content: '';
      height: 5rem;
    }

    @media(hover: hover) and (pointer: fine) {
      &:hover::before,
      &:hover::after {
        opacity: 1;
      }
    }
  }
}

.three-teaser__item__inner {
  position: relative;
  z-index: 1;
}

.three-teaser--blue-gray .three-teaser__item__inner,
.three-teaser--bg-image .three-teaser__item__inner {
  @include mq($from: m) {
    height: 100%;
  }
}

.three-teaser__item:not(:last-child) .three-teaser__item__inner {
  &::before {
    background: $color-border-gray-light;
    content: '';
    height: 14rem;
    position: absolute;
    right: -3rem;
    top: 0.2rem;
    width: 0.1rem;
  }
}

.three-teaser__item:not(:last-child) .three-teaser__item__inner::before {
  .three-teaser--blue-light & {
    background: $color-border-blue-light;
  }

  .three-teaser--blue-gray &,
  .three-teaser--bg-image & {
    height: calc(100%);
  }
}


.three-teaser__item__kicker {
  color: $color-blue;
  font-family: $font-family-secondary;
  font-size: 1.5rem;
  font-weight: $font-weight-bold;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.three-teaser--bg-image .three-teaser__item__kicker {
  color: $color-blue-light;
}

.three-teaser--bg-image .three-teaser__item__headline {
  transition: color 0.2s;
}

.three-teaser--blue-gray .three-teaser__item__headline {
  @include mq($from: m) {
    min-height: 6.4rem;
  }
}

@media(hover: hover) and (pointer: fine) {
  .three-teaser--bg-image .three-teaser__item:hover .three-teaser__item__headline {
    color: $color-blue-light;
  }
}

.three-teaser__item__body {
  margin-top: 1rem;

  @include mq($until: m) {
    display: none;
  }

  @include mq($from: m) {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s;
  }
}

@media(hover: hover) and (pointer: fine) {
  .three-teaser__item:hover .three-teaser__item__body {
    @include mq($from: m) {
      max-height: 15rem;
    }
  }
}

.three-teaser__item__icon {
  position: relative;
  z-index: 1;
}

.three-teaser__item__icon .icon {
  color: $color-blue;
  font-size: 1.4rem;
}

.three-teaser--blue-light .three-teaser__item__icon {
  display: none;
}

.three-teaser__button {
  padding-top: 5rem;
  text-align: center;
}

.three-teaser__item__date,
.three-teaser__item__location,
.three-teaser__item__institution {
  margin-top: 0.5rem;
  padding-left: 2.8rem;
  position: relative;

  @include mq($from: m) {
    margin-top: 1rem;
  }
}

.three-teaser__item__location + .three-teaser__item__institution {
  margin-top: 0;
}

.three-teaser__item__date .icon,
.three-teaser__item__location .icon,
.three-teaser__item__institution .icon {
  left: 0;
  position: absolute;
  top: 0.6rem;
}