.product-card-grid {
  max-width: 144rem;
  margin: 0 auto;
  padding: var(--nova-space-xl) var(--nova-space-page-margin);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--nova-space-xl);
  column-gap: var(--nova-space-sm);
}

@media screen and (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1440px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 1920px) {
  .card-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}