@layer components {
  .home {
    display: grid;
    inline-size: auto;
    gap: var(--block-space);
    grid-template-columns: repeat(auto-fit, minmax(max(130px, 12cqi), 1fr));
    letter-spacing: -0.01ch;
    list-style: none;
    outline-offset: var(--inline-space-half);
    padding: 0;
  }

  .home__section {
    display: inline-flex;
    flex-direction: column;
    margin-block-end: var(--block-space-half);
  }

  .home__card {
    --rotate: 1deg;
    align-items: center;
    aspect-ratio: 4 / 5;
    border-radius: 0.5em;
    border: 1px solid var(--color-ink-lighter);
    container-type: inline-size;
    color: inherit;
    display: flex;
    flex-direction: column;
    font-size: clamp(0.8rem, 3cqi, 1.4rem);
    justify-content: center;
    overflow: hidden;
    padding: 10cqi 5cqi;
    text-decoration: none;
    transition: all 0.3s ease;

    img {
      max-inline-size: clamp(2.4rem, 50cqi, 8rem);
    }

    &:hover {
      transform: rotate(var(--rotate)) scale(1.05);
    }
  }

  .home__card--messages { background-color: oklch(var(--lch-red) / 5%); }
  .home__card--people { background-color: oklch(var(--lch-green) / 5%); }
  .home__card--one-pagers { background-color: oklch(var(--lch-blue) / 5%); }

  [aria-current="page"] {
    font-weight: bold;
  }
}