@layer genr.component {
    .news-teaser {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      width: 100%;
      max-width: var(--width-lg);
      margin-inline: auto;
      padding-block: 4rem;
      padding-inline: 1.5rem;

      @media (width > 768px) {
        gap: 3rem;
        padding-block: 7.5rem;
      }

      @media (width > 1280px) {
        padding-inline: 0;
      }

      .h5 {
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 6px;
      }
    }

    .news-teaser__items {
      display: flex;
      flex-direction: column;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 3rem;

      @media (width > 768px) {
        gap: 2rem;
      }

      @media (width > 768px) {
          display: grid;
          grid-template-areas:
              'a a b'
              'a a c';
          grid-template-columns: 1fr 1fr 1fr;
      }
    }

    .news-teaser__item {
      width: 100%;

      &:nth-child(1) {
        grid-area: a;

        .image__picture {
          aspect-ratio: 2 / 1;
        }
      }

      &:nth-child(2) {
        grid-area: b;
      }

      &:nth-child(3) {
        grid-area: c;
      }

      &:nth-child(n + 2) {
        .news-teaser-item {
          .h4 {
            font-size: var(--font-size-lg);
          }
        }
      }
    }

    .news-teaser__footer {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 1rem 0;
    }

    /* single item */
    .news-teaser-item {
      position: sticky;
      top: calc(var(--header-height-lg) - 3rem);
      height: auto;
      display: flex;
      flex-direction: column-reverse;
      padding-bottom: 1.5rem;
      gap: 0.25rem;
      text-decoration: none;
      transition: calc(var(--transition-duration) / 2);

      .headline {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        color: var(--color-light-patrol);
        font-weight: 700;
        transition: calc(var(--transition-duration) / 2);
      }

      &:hover {
        background-color: var(--color-darker-green);
        box-shadow: 0 0 0 1rem var(--color-darker-green);

        .news-teaser-item__header {
          transform: translateY(1rem);
        }

        .news-teaser-item__media {
          clip-path: inset(0);

          .image__media {
            transform: scale(1.05);
          }
        }

        .icon {
          transform: translateX(0.25rem);
        }
      }
    }

    .news-teaser-item__header {
      transition: calc(var(--transition-duration) / 2);

      .icon {
        /* margin-block: -0.5rem; */

        vertical-align: bottom;
        color: var(--color-signal-violet);
        transition: calc(var(--transition-duration) / 2);
      }
    }

    .news-teaser-item__date {
      font-size: var(--font-size-base);
      font-weight: 400;
      color: var(--color-white);
    }

    .news-teaser-item__media {
      overflow: hidden;
      margin: -1rem -1rem 0;
      clip-path: inset(1rem);
      transition: calc(var(--transition-duration) / 2);

      .image__media {
        transition: var(--transition-duration);
      }
    }
}