:root {
  --wine: #102654;
  --cream: #dce5f4;
  --paper: #f7f9ff;
}

body { background: #08152f; }
.cover { background: linear-gradient(135deg, #091735, #1d4388); }
.cover-card { border-color: #cdd8ec; background: #0b1d3d88; }
.demo-banner { background: #102654; color: #e0e8f7; }
.demo-banner i { background: #afc1df; }
.open-button { color: #102654; }
.shade {
  background:
    linear-gradient(90deg, rgba(5, 16, 41, .76), rgba(13, 39, 85, .34) 55%, rgba(5, 16, 41, .53)),
    linear-gradient(0deg, rgba(4, 14, 34, .62), transparent 65%);
}
footer { background: #0b1d3d; color: #d9e3f6; }
footer div { background: #aabbd7; }

.gallery {
  padding: 58px 24px 64px;
  background: linear-gradient(180deg, #0b1d3d, #102654);
  color: var(--paper);
  text-align: center;
}
.gallery .eyebrow { color: #c8d5eb; }
.gallery h2 {
  margin: 0 0 27px;
  font: 500 clamp(2.35rem, 7vw, 4rem)/1 var(--serif);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: auto;
}
.gallery-grid img {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 1px solid #cdd8ec80;
}
.gallery-grid img:first-child { object-position: 76% center; }

@media (max-width: 600px) {
  .gallery { padding: 46px 18px 50px; }
  .gallery-grid { gap: 8px; }
  .gallery-grid img { height: 178px; }
}