/*
 * Productpagina: één product, foto naast de tekst.
 * Labels, kenmerken (.specs), opmerking en knoppen komen uit merkpagina.css,
 * zodat ze er hetzelfde uitzien als op de merkpagina.
 */
.product__grid {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}

@media (min-width: 64em) {
  .product__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-section);
  }
}

.product__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
}

.product__body h1 {
  margin-bottom: var(--space-s);
}

.product__body .specs {
  margin-block: var(--space-m);
}

/* De documentenlijst van de merkpagina is een raster; hier één kolom */
.product__docs {
  display: block;
}

.product__docs ul {
  margin-top: var(--space-s);
}

.product__terug {
  margin: var(--space-m) 0 0;
}