@layer genr.component {
  .news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 1.5rem;
    text-decoration: none;
    background-color: var(--color-dark-green);
    text-decoration: none;
    transition: calc(var(--transition-duration) / 2);

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

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

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

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

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

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

    .headline {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      color: var(--color-light-patrol);
      font-size: var(--font-size-xl);
      font-weight: 700;

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

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

  .news-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    order: -1;
    margin: -1rem -1rem 0;
    clip-path: inset(1rem);
    overflow: hidden;
    aspect-ratio: 464 / 309;
    background-color: var(--color-dark-green);
    transition: calc(var(--transition-duration) / 2);

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