/* ----------------------------- */
/* MOBILE LAYOUT (default)       */
/* ----------------------------- */
body {
  padding: 12px;
  font-size: 16px;
}

.product-grid {
  display: block;
}

.product {
  width: 100%;
  margin-bottom: 20px;
}

.product img {
  width: 100%;
  height: auto;
}

/* ----------------------------- */
/* TABLET / SMALL LAPTOP         */
/* ----------------------------- */
@media (min-width: 600px) {
  .product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .product {
    width: 48%;
  }
}

/* ----------------------------- */
/* FULL LAPTOP / DESKTOP         */
/* ----------------------------- */
@media (min-width: 1024px) {
  body {
    padding: 40px;
    font-size: 18px;
  }

  .product {
    width: 30%;
  }

  .product:hover {
    transform: scale(1.03);
    transition: 0.3s ease;
  }
}