@layer components {
  .creators-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - var(--header-height));
  }

  .creators-feature .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
  }

  .feature {
    flex-direction: row;
    align-items: center;
    gap: var(--space-7);
  }

  .feature__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
  }

  .feature__aside .info-card__icon {
    width: 5.5rem;
    aspect-ratio: 1;

    & svg {
      width: 40px;
      height: 40px;
    }
  }

  .feature__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .feature__list {
    gap: var(--space-4);
  }

  .creators-content__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    text-align: center;
  }

  .creators-how__steps {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .step--inline {
    flex-direction: row;
    align-items: start;
    gap: var(--space-4);
  }

  .step__badge {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent, var(--color-brand-green));
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    color: var(--color-white);
  }

  .creators-how__note {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    max-width: 720px;
    margin: 0 auto;

    & .info-card__icon {
      flex-shrink: 0;
    }
  }

  @media (max-width: 768px) {
    .feature {
      flex-direction: column;
    }

    .feature--reverse .feature__aside {
      order: 0;
    }
  }
}