.content-teaser__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
  align-items: flex-start;
  margin: 0;
  padding-block: 4rem;

  &.content-teaser__grid--items-1 {
    grid-template-columns: 1fr;
  }
  &.content-teaser__grid--items-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  &.content-teaser__grid--items-3:not(:has(.wide-item)) {
    grid-template-columns: repeat(3, 1fr);
  }
  &.content-teaser__grid--items-4:not(:has(.wide-item)) {
    grid-template-columns: repeat(4, 1fr);
  }

  & div.content-teaser__grid-item {
    &:hover {
      cursor: unset;
    }
  }

  & .content-teaser__grid-item {
    text-decoration: none;
    color: rgb(var(--color-foreground));
    background: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-end;
    padding: 3rem;
    hyphens: auto;
    text-wrap: pretty;

    height: 500px;
    border-radius: var(--radius-medium);
    overflow: clip;
    transition: all 0.2s;

    &:is(a) {
      & h4.grid-headline {
        display: flex;
        gap: 1rem;
        align-items: center;
        & svg {
          opacity: 0.75;
          width: 3rem;
          transition: all 0.3s ease-in-out;
        }
      }
      &:hover {
        cursor: pointer;
        transform: scale(1.02);
        box-shadow: 0 0 12px rgba(var(--color-foreground), 0.25);
        & h4.grid-headline svg {
          margin-left: 0.5rem;
          opacity: 1;
        }
      }
    }

    & span {
      line-height: 2rem;
    }

    &.wide-item {
      background: var(--tertiary);
      display: flex;
      flex-direction: row;
      gap: 2rem;
      padding: 0;
      transform: none;
      height: fit-content;
      cursor: default;
      grid-column: span 2;

      & .text-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        width: calc(50% - 1rem);
        padding: 5rem 3rem;
        position: relative;

        & h4.grid-headline {
          color: white;
          margin: 0;
          margin-bottom: 3.5rem;
          font-size: 6.5rem;
          line-height: 5rem;
        }

        & span.grid-subline {
          color: var(--secondary);
          font-family: var(--font-special-family);
          text-transform: uppercase;
          font-size: 2.8rem;
          line-height: 3.4rem;
          margin-bottom: 1.75rem;
        }

        & p {
          margin: 0;
          color: var(--gradient-background);
          width: 90%;
        }

        & .button {
          margin-top: 2rem;
          width: fit-content;
        }

        & .leafs-bg {
          position: absolute;
          bottom: -50px;
          right: -80px;
          width: 320px;
          height: 210px;
          z-index: 1;
          mix-blend-mode: soft-light;
        }
      }

      & .video-wrapper {
        position: relative;
        width: calc(50% + 1rem);
        display: flex;
        aspect-ratio: 16 / 9;

        & .video-previewimage-wrapper {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 100%;
          transition: opacity 1s ease-in-out;

          & .video-preview {
            cursor: pointer;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          &:hover .playbutton {
            transform: scale(1.1);
          }

          &:active {
            opacity: 0.5;

            & .playbutton {
              transform: scale(1.05);
            }
          }

          & .playbutton {
            position: absolute;
            max-width: 100%;
            max-height: 100%;
            transition: all 0.2s ease-in-out;
          }
        }

        & .video-iframe {
          width: 100%;
          height: 100%;
        }
      }
    }

    &.item-with-bgimage {
      color: white;
      background-position: top;
      background-size: cover;

      & h4 {
        font-family: var(--font-special-family);
        text-transform: uppercase;
        font-size: 2.8rem;
        line-height: 3.4rem;
        margin: 0;
        color: white;
      }
    }
  }
}

@media screen and (max-width: 990px) {
  .content-teaser__grid,
  .content-teaser__grid.content-teaser__grid--items-2,
  .content-teaser__grid.content-teaser__grid--items-3,
  .content-teaser__grid--items-4 {
    grid-template-columns: 1fr;

    & .content-teaser__grid-item {
      min-height: fit-content;
      grid-column: span 2;
      height: 360px;
      background-position: center;

      &.wide-item {
        flex-direction: column;

        & .text-wrapper {
          width: 100%;
          height: auto;

          & h4.grid-headline {
            margin-bottom: 2.5rem;
            font-size: 4.5rem;
            line-height: 4rem;
          }

          & span.grid-subline {
            font-size: 2.2rem;
            line-height: 2rem;
            margin-bottom: 1rem;
          }

          & p {
            width: 100%;
          }

          & .leafs-bg {
            bottom: -20px;
            right: -50px;
            width: 213px;
            height: 140px;
          }
        }

        & .video-wrapper {
          width: 100%;
          height: auto;
        }

        & h4.grid-headline {
          line-height: 5rem;
          margin-bottom: 3.5rem;
        }

        & span.grid-subline {
          color: var(--secondary);
          font-family: var(--font-special-family);
          text-transform: uppercase;
          font-size: 2.8rem;
          line-height: 3.4rem;
          margin-bottom: 1.75rem;
        }
      }
    }
  }
  .content-teaser__grid.content-teaser__grid--items-3 {
    & .content-teaser__grid-item {
      grid-column: span 3;
    }
  }
}

@media screen and (max-width: 749px) {
  .content-teaser__grid,
  .content-teaser__grid.content-teaser__grid--items-2,
  .content-teaser__grid.content-teaser__grid--items-3,
  .content-teaser__grid--items-4 {
    & .content-teaser__grid-item {
      height: 320px;

      & h4.grid-headline {
        font-size: 2.3rem;
        line-height: 1;
      }
    }
  }
}