/* Center incomplete rows while keeping every product card the same width. */
#product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

#product-grid .product-card {
  flex: 0 0 calc((100% - 72px) / 4);
}

#product-grid .product-card-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: none;
  background: var(--cream);
}

#product-grid .product-card-media::before {
  opacity: .5;
}

#product-grid .product-card-media.has-image::before {
  display: none;
}

#product-grid .product-card-media.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#product-grid .product-card-content {
  min-height: 92px;
}

@media (max-width: 1250px) {
  #product-grid .product-card {
    flex-basis: calc((100% - 48px) / 3);
  }
}

@media (max-width: 1000px) {
  #product-grid .product-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 650px) {
  #product-grid {
    gap: 18px;
  }

  #product-grid .product-card {
    flex-basis: 100%;
  }
}