@layer genr.component {
  .hero-event-genr {
    color: var(--color-darker-green);
    background-image: linear-gradient(to top, transparent, 10rem, var(--color-sun-yellow) 10rem);
  }

  .hero-event-genr__content {
    width: 100%;
    max-width: var(--width-sm);
    margin: auto;
    padding: 4rem 1.5rem;
  }

  .hero-event-genr__header {
    margin-bottom: 1.5rem;

    .h1 {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
  }

  .hero-event-genr__label {
    font-size: var(--font-size-base);
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
  }

  .hero-event-genr__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;

    .chip {
      margin-bottom: 1rem;
    }
  }

  .hero-event-genr__types {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  /* .hero-event-genr__date-time {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    font-size: var(--font-size-lg);

    @media (width > 576px) {
      gap: 0.125rem;
    }
  } */

  /* .hero-event-genr__dates {

  } */

  /* .hero-event-genr__date {
    font-weight: 700;
  } */

  /* .hero-event-genr__time {
    @media (width > 576px) {
      &.start {
        position: relative;
        margin-left: 0.75rem;
        padding-left: 1rem;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 20%;
          bottom: 20%;
          width: 1px;
          background-color: currentColor;
        }
      }
    }
  } */

  .hero-event-genr__footer {
    margin-top: 2.5rem;
  }

  .hero-event-genr__media {
    max-width: var(--width-lg);
    margin-inline: auto;
  }
}