/* PBGAI media layer — ORDER-028. Kept OUT of pbgai.css on purpose: that file is
   Grok's craft surface and may be revised; this one is only the image slots Code placed.
   Everything here is additive and scoped to the figure classes below. */
.hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.25rem; align-items: center; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 1.5rem; } }
.hero-media, .product-media, .band-media { margin: 0; }
.hero-media img, .product-media img, .band-media img {
  display: block; width: 100%; height: auto; border-radius: 2px;
}
.hero-media img { box-shadow: 0 18px 44px rgba(33,30,27,.16); }
.product-media img { margin-bottom: 1rem; aspect-ratio: 16 / 10; object-fit: cover; }
.band-media { margin: 2rem 0; }
.band-media img { aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 640px) { .band-media img { aspect-ratio: 16 / 10; } }
@media print { .hero-media, .product-media, .band-media { display: none; } }