/* Reversible staging trial. Remove data-layout="wide" from index.html to
   restore the approved contained layout; the original styles stay untouched. */
html[data-layout="wide"] {
  --page-gutter: 24px;
}
html[data-layout="wide"] .container {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: none;
}
html[data-layout="wide"] .home-hero {
  width: 100%;
  max-width: none;
}
html[data-layout="wide"] .hero-caption {
  left: var(--page-gutter);
}
html[data-layout="wide"] .hero-controls {
  left: var(--page-gutter);
  right: var(--page-gutter);
}
@media (min-width: 1101px) {
  html[data-layout="wide"] .art-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  html[data-layout="wide"] .art-image {
    max-height: none;
  }
}
@media (max-width: 760px) {
  html[data-layout="wide"] { --page-gutter: 16px; }
  html[data-layout="wide"] .hero-caption { right: var(--page-gutter); }
}