CSS Grid Product Page Layout Generator

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.product {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 20px;
  grid-template-areas:
    "gallery"
    "buybox"
    "details";
}

.product > .gallery { grid-area: gallery; }
.product > .buybox { grid-area: buybox; }
.product > .details { grid-area: details; }

@media (min-width: 900px) {
  .product {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto auto;
    gap: 40px;
    grid-template-areas:
      "gallery buybox"
      "details buybox";
  }
}