.alteo-gallery {
  --gallery-gutter: max(24px, calc((100vw - 1240px) / 2));
  padding: clamp(56px, 7vw, 96px) var(--gallery-gutter);
  background: #10110e;
  color: #f4eee1;
  scroll-margin-top: 90px;
  overflow: hidden;
}
.alteo-gallery-heading { display: flex; justify-content: center; align-items: end; gap: 32px; margin-bottom: 36px; text-align: center; }
.alteo-gallery-kicker { color: #bc9d68; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 16px; }
.alteo-gallery h2 { font-family: Georgia, serif; font-size: clamp(28px, 4vw, 56px); font-weight: 400; line-height: 1.1; margin: 0; }
.alteo-gallery h2 em { color: #bc9d68; font-weight: 400; }
.alteo-gallery-intro { max-width: 300px; color: #b5b3a9; font-size: 15px; line-height: 1.7; margin: 0; }
/* Edge-to-edge moving strip that fades out at both sides. */
.alteo-gallery-grid {
  display: flex;
  gap: 16px;
  overflow: hidden;
  margin-inline: calc(var(--gallery-gutter) * -1);
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.alteo-gallery-card { display: block; flex: 0 0 clamp(220px, 22vw, 290px); aspect-ratio: 4 / 5; padding: 0; margin: 0; background: #1d201a; border: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in; position: relative; box-shadow: 0 0 0 1px rgba(212, 170, 98, 0); transition: box-shadow .35s ease; }
.alteo-gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, filter .45s ease; }
.alteo-gallery-card:hover { box-shadow: 0 0 0 1px rgba(212, 170, 98, 0.7), 0 14px 30px rgba(0, 0, 0, 0.45); }
.alteo-gallery-card:hover img { transform: scale(1.04); filter: brightness(1.08); }
.alteo-gallery-card::after { content: '\2197'; position: absolute; bottom: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; background: #10110ecc; color: #f4eee1; border: 1px solid #ffffff40; border-radius: 50%; }
.alteo-gallery-card:focus-visible, .gallery-viewer button:focus-visible { outline: 2px solid #d6b77e; outline-offset: 4px; }
.gallery-viewer { max-width: none; max-height: none; width: 100vw; height: 100dvh; padding: 64px 70px 56px; margin: 0; border: 0; background: #090b09f5; color: #f4eee1; }
.gallery-viewer::backdrop { background: #090b09; }
.gallery-viewer[open] { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.gallery-viewer-image { display: block; max-width: 100%; max-height: calc(100dvh - 155px); width: auto; height: auto; object-fit: contain; }
.gallery-viewer-caption { margin: 16px 0 0; font-size: 13px; text-align: center; color: #c9c4b6; }
.gallery-viewer button { background: #22251d; color: #f4eee1; border: 1px solid #ffffff30; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 22px; }
.gallery-viewer-close { position: absolute; right: 20px; top: 16px; }
.gallery-viewer-prev { position: absolute; left: 14px; top: 50%; }
.gallery-viewer-next { position: absolute; right: 14px; top: 50%; }
@media (max-width: 640px) {
  .alteo-gallery-heading { display: block; }
  .alteo-gallery-intro { margin-top: 22px; }
  .alteo-gallery-grid { gap: 12px; }
  .alteo-gallery-card { flex-basis: 62vw; }
  .gallery-viewer { padding: 66px 52px 50px; }
  .gallery-viewer button { width: 36px; height: 36px; }
  .gallery-viewer-prev { left: 8px; } .gallery-viewer-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .alteo-gallery-card img { transition: none; } }