@layer customer {
  .categories {
    display: grid;
    gap: var(--size-2);
    --grid-columns: 2;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  }

  .category {
    background-color: var(--gray-0);
    border-radius: var(--radius-1);
    border: solid 1px var(--gray-4);
    color: var(--gray-7);
    display: block;
    height: 100%;
    padding: var(--size-4);
    text-align: center;

    &:hover {
      background-color: var(--gray-1);
      border-color: var(--gray-5);
      color: var(--gray-12);
    }
  }

  @media (min-width: 480px) {
    .categories {
      --grid-columns: 3;
    }
  }

  @media (min-width: 768px) {
    .categories {
      --grid-columns: 4;
    }
  }

  @media (min-width: 1024px) {
    .categories {
      --grid-columns: 5;
    }
  }
}