body {
  background-color: var(--corpSecondary);
}

#productContainer {
  margin: 2em;
}

.productGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1em;
  padding: 20px;
}

.product {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  padding: 1em;
  background-color: var(--artSecondary);
  border-radius: 15px;
  box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.productImg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  object-fit: cover; /* Ensures images maintain their aspect ratio */
  max-height: 100%; /* Prevents image overflow */
}

/* Laptop (Max Width: 1024px) */
@media (max-width: 1024px) {
  .productGrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .product {
    padding: 0.8em;
  }
}

/* Tablet (Max Width: 768px) */
@media (max-width: 768px) {
  .productGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .product {
    padding: 0.6em;
  }
}

/* Mobile (Max Width: 480px) */
@media (max-width: 480px) {
  .productGrid {
    grid-template-columns: repeat(1, 1fr);
  }
  .product {
    padding: 0.5em;
  }
}