@import url("../sw/style.css?v=20260826-1");

:root {
  --page: #10171b;
  --surface: #19252a;
  --surface-2: #203138;
  --line: #41606b;
  --mustard: #47b9db;
  --yellow: #f3f0df;
  --red: #df7699;
}

.hero h1 span { color: #59c7e6; }
.parts-hero button { aspect-ratio: 16 / 10; }
.parts-hero img { height: 100%; object-fit: cover; object-position: center; }
.decade-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 20px; }
.decade-grid figure:first-child button { aspect-ratio: 3 / 4; }
.decade-grid figure:nth-child(2) button { aspect-ratio: 4 / 3; }
.decade-grid figure:last-child { grid-column: 1 / -1; }
.decade-grid figure:last-child button { aspect-ratio: 16 / 10; }
.gallery-section { background: linear-gradient(140deg, rgb(71 185 219 / 7%), rgb(243 240 223 / 3%)); box-shadow: inset 0 1px var(--line); }

@media (max-width: 700px) {
  .decade-grid { grid-template-columns: 1fr; }
  .decade-grid figure:last-child { grid-column: auto; }
  .decade-grid figure button, .decade-grid figure:nth-child(2) button, .decade-grid figure:last-child button { aspect-ratio: 4 / 3; }
  .decade-grid figure:first-child button { aspect-ratio: 3 / 4; }
}