@layer components {
  .product-grid {
    display: block;
    color: var(--theme-text-primary);
  }
  .product-grid__skeletons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 0.5rem;
  }
  @media (min-width: 576px) {
    .product-grid__skeletons {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }
  }
  @media (min-width: 1024px) {
    .product-grid__skeletons {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .product-grid__skeleton-card {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
  }
  .product-grid__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 576px) {
    .product-grid__list {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }
  }
  @media (min-width: 1024px) {
    .product-grid__list {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .product-grid__item {
    display: block;
    list-style: none;
  }
  .product-grid__load-more {
    display: flex;
    justify-content: center;
    padding: 3rem 0 2rem;
  }
  .product-grid__load-more > .button {
    width: 100%;
  }
  @media (min-width: 1024px) {
    .product-grid__load-more > .button {
      width: auto;
    }
  }
  .product-grid__message {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0;
    padding: 2rem 0;
    color: var(--theme-text-primary);
    text-align: center;
  }
}