Teaser Categories

.teaser-categories {
  background: $color-dark;
  color: #fff;
  padding: 5rem 1.5rem;
  position: relative;

  &::after,
  &::before {
    bottom: 0;
    content: '';
    display: block;
    height: 2.3rem;
    position: absolute;

    @include mq($from: m) {
      height: 3.4rem;
    }
  }

  &::before {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 34"><defs/><path fill="' + $color-blue-gray + '" fill-rule="evenodd" d="M753.41 58.24H-63.4V34H-.7a20 20 0 0 0 14.25-5.95l21.79-22.1A20 20 0 0 1 49.57 0H753.4v58.24z"/></svg>');
    left: calc(50% - 1.7rem);
    width: 3.4rem;
    z-index: 1;

    @include mq($from: m) {
      left: calc(72% - 2.5rem);
      width: 5rem;
    }
  }

  &::after {
    background: $color-blue-gray;
    right: 0;
    width: calc(50% - 1.7rem);

    @include mq($from: m) {
      width: calc(28% - 2.5rem);
    }
  }

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

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

.teaser-categories__inner {
  margin: 0 auto;
  max-width: 127rem;
}

.teaser-categories__headline {
  margin-bottom: 0.5rem;

  @include mq($from: m) {
    margin-bottom: 4rem;
  }
}

.teaser-categories__items {
  @include mq($from: m) {
    display: flex;
    flex-wrap: wrap;
  }

  @include mq($from: l) {
    margin: 0 -3rem;
  }
}

.teaser-categories__item {
  color: #fff;
  display: block;
  padding: 2rem 0;
  position: relative;
  transition: color 0.2s;

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

  @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;
      }
    }
  }

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

    @media(hover: hover) and (pointer: fine) {
      &:hover {
        color: $color-blue;
      }
    }
  }

  @include mq($from: xl) {
    flex: 1 1 0;
    width: auto;
  }
}

.teaser-categories__item__inner {
  position: relative;
  z-index: 1;
}

.teaser-categories__item:not(:last-child) .teaser-categories__item__inner {
  &::before {
    background: $color-border-dark;
    content: '';
    height: 14rem;
    position: absolute;
    right: -3rem;
    top: 0.2rem;
    width: 0.1rem;
  }
}

.teaser-categories__item:nth-child(3) .teaser-categories__item__inner::before {
  @include mq($from: m) {
    display: none;
  }

  @include mq($from: xl) {
    display: block;
  }
}

@media(hover: hover) and (pointer: fine) {
  .teaser-categories__item:hover .teaser-categories__item__inner::before {
    display: none;
  }
}

.teaser-categories__item__icon {
  color: $color-blue;
  margin-bottom: 1rem;

  @include mq($from: m) {
    margin-bottom: 1.5rem;
  }
}

.teaser-categories__item__icon .icon {
  height: 2.8rem;
  width: 2.8rem;
}

.teaser-categories__item__headline {
  @include mq($until: m) {
    br {
      display: none;
    }
  }

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

.teaser-categories__item__text {
  color: $color-dark;
  transition: color 0.2s;

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

@media(hover: hover) and (pointer: fine) {
  .teaser-categories__item:hover .teaser-categories__item__text {
    color: $color-blue;
  }
}