@layer components {
  .collection-product-list {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .collection-product-list__card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--border-radius-3);
    overflow: clip;
    box-shadow: var(--shadow-3);
    max-width: var(--max-reach-md);
    margin-inline: auto;
    transition: all 300ms;
    height: 100%;

    /* The card is a <button> so it opens the add-to-cart modal; reset
       native button chrome so it renders as a plain card. */
    border: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    width: 100%;

    img {
      aspect-ratio: 5 / 4;
      object-fit: contain;
      padding: var(--space-md);
    }
  }

  .collection-product-list__card-text-container {
    padding: var(--space-md);
    background-color: var(--color-primary-1);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x3);
    width: 100%;
    flex-grow: 1;
    transition: inherit;

    h2 {
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-tighter);
    }
  }

  .collection-product-list__wholesale-price {
    font-size: var(--font-size-sm-x1);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-6);
  }

  .collection-product-list__sku,
  .collection-product-list__wholesale-price-ex-gst {
    font-size: var(--font-size-sm-x3);
    color: var(--color-neutral-5);
  }

  @media (any-hover: hover) {
    .collection-product-list__card:hover {
      scale: 0.98;

      .collection-product-list__card-text-container {
        background-color: var(--color-primary-0);
      }
    }
  }

  .collection-product-list__card:active {
    scale: 0.94;

    .collection-product-list__card-text-container {
      background-color: var(--color-white);
    }
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >=40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >=48rem) {
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >=64rem) {
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >=80rem) {
  }
}