@layer genr.component {
    .hero-news {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: var(--width-sm);
      margin: 0 auto 2rem;

      @media (width > 992px) {
        flex-direction: row;
        gap: 5.5rem;
        padding-block: 2.5rem;
      }
    }

    .hero-news__content {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      padding-inline: 1.5rem;

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

    .hero-news__header {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      .h1 {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        color: var(--color-light-patrol);
      }
    }

    .hero-news__date {
      color: var(--color-white);
      font-size: var(--font-size-base);
      font-style: italic;
      font-weight: 400;
      letter-spacing: var(--letter-spacing-lg);
      line-height: 1.2;
    }
}