@layer base, layout, components, pages;

@layer layout {
  .home-hero {
    min-block-size: calc(var(--size-12) * 6);
    max-inline-size: calc(var(--viewport-max) / 2);
    display: grid;
    align-content: center;
    padding-block: var(--size-9);
  }

  .home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-2);
    margin-block-start: var(--size-4);
  }

  .home-section {
    padding-block: var(--size-7);
    border-block-start: var(--border-width-0) solid var(--neutral-4);
  }

  .home-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, calc(var(--size-12) * 2)), 1fr)
    );
    gap: var(--size-3);
  }
}

@layer components {
  .home-title {
    margin-block: var(--size-1);
    color: var(--neutral-12);
    font-family: var(--font-transitional);
    font-size: var(--font-size-10);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    line-height: var(--font-size-10);
    letter-spacing: var(--font-letter-spacing--2);
    text-wrap: balance;
  }

  .home-description {
    max-inline-size: calc(var(--viewport-max) / 2);
    color: var(--neutral-9);
    font-size: var(--font-size-2);
    line-height: var(--font-line-height-2);
    text-wrap: pretty;
  }

  .text-link {
    font-family: var(--font-mono);
    font-size: var(--font-size--1);
  }

  .home-section__header {
    max-inline-size: calc(var(--viewport-max) / 2);
    margin-block-end: var(--size-4);
  }

  .home-section__header h2 {
    margin-block-start: var(--size-1);
    color: var(--neutral-12);
    font-size: var(--font-size-5);
    font-weight: var(--font-weight-normal);
  }

  .home-card {
    padding: var(--size-3);
  }

  .home-card h3 {
    color: var(--neutral-12);
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
  }

  .home-card p {
    margin-block-start: var(--size-2);
    color: var(--neutral-9);
  }
}