@layer components {
  .hero {
    max-width: var(--max-length-sm);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg) var(--space-xs);

    & .hero__title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--length-4);

      & h1 {
        text-align: center;
        font-size: var(--font-size-xl);
        @media (min-width: 640px) {
          font-size: var(--font-size-xxl);
        }
      }

      & p {
        text-align: center;
        color: var(--neutral-600);
      }
    }

    & .hero__image {
      width: fit-content;
      height: fit-content;
      background: black;

      padding: var(--space-sm);
      border-radius: var(--border-radius-full);
      aspect-ratio: 1 / 1;
      box-shadow: var(--shadow-md);
      border: var(--border-width-md) solid;

      & img {
        width: var(--length-14);
        height: var(--length-14);
      }
    }
  }
}