/* The stacked grid keeps the largest caption in flow while slides move on the compositor. */
#gallery .g-carousel {
  --g-card-width: clamp(360px, 33vw, 424px);
  --g-image-height: clamp(218px, 19vw, 254px);
  --g-step: 77%;
  --g-duration: 520ms;
  --g-ease: cubic-bezier(.25, .65, .28, 1);
}
#gallery .g-carousel-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
  height: auto;
  margin: 0;
  padding: 14px 0 42px;
  perspective: 1500px;
}
#gallery .g-carousel-slide {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  width: var(--g-card-width);
  height: auto;
  min-height: 446px;
  margin: 0;
  padding: 0;
  border: 1px solid #d4c3a3;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 11px 26px #14231e19;
  transform: translate3d(calc(var(--g-offset, 0) * var(--g-step)), 0, var(--g-depth, 0px)) scale(var(--g-scale, 1));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--g-duration) var(--g-ease),
    opacity var(--g-duration) var(--g-ease),
    box-shadow var(--g-duration) var(--g-ease);
}
#gallery .g-carousel-slide.g-current {
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 20px 42px rgba(20,35,30,.16);
}
#gallery .g-carousel-slide.g-near {
  opacity: .92;
  pointer-events: auto;
}
#gallery .g-carousel-slide img {
  flex: 0 0 var(--g-image-height);
  height: var(--g-image-height);
  aspect-ratio: auto;
  border-radius: 0;
  background: #efe9dd;
  transition: none;
}
#gallery .g-carousel-slide .gallery-caption {
  position: static;
  display: block;
  padding: 17px 19px 20px;
  border-top: 1px solid #e6daca;
  background: #fffdf8;
  color: var(--color-ink);
  text-align: start;
  opacity: 1;
  transition: none;
}
#gallery .g-carousel-slide .gallery-caption strong {
  display: block;
  color: var(--color-ink);
  font: 700 clamp(20px, 1.85vw, 24px)/1.2 Georgia, serif;
}
#gallery .g-carousel-slide .gallery-caption span {
  display: block;
  margin-top: 8px;
  color: var(--color-muted);
  font: 400 clamp(14px, 1.2vw, 15px)/1.55 Inter, Arial, sans-serif;
}
#gallery .g-carousel-slide:not(.g-current) .gallery-caption { visibility: hidden; }
#gallery .g-side-title {
  position: absolute;
  inset: calc(var(--g-image-height) + 18px) 24% auto 19px;
  color: var(--color-ink);
  font: 700 clamp(18px, 1.6vw, 21px)/1.28 Georgia, serif;
  overflow-wrap: anywhere;
  visibility: hidden;
}
#gallery .g-near .g-side-title { visibility: visible; }
#gallery .g-right .g-side-title { inset-inline: 24% 19px; }
#gallery .g-carousel-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
#gallery .g-carousel-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 7px clamp(9px, 2.8vw, 34px);
}
#gallery .g-carousel-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-ink);
  box-shadow: none;
}
#gallery .g-carousel-controls [data-gallery-action=previous] { grid-area: 1 / 1; justify-self: end; }
#gallery .g-carousel-controls [data-gallery-action=next] { grid-area: 1 / 3; justify-self: start; flex-direction: row-reverse; }
#gallery .g-carousel-controls :is([data-gallery-action=previous],[data-gallery-action=next])::before {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #baa27b;
  border-radius: 50%;
  background: #fffdf8;
  font: 400 21px/1 Georgia, serif;
}
#gallery .g-carousel-controls [data-gallery-action=previous]::before { content: '←'; }
#gallery .g-carousel-controls [data-gallery-action=next]::before { content: '→'; }
#gallery .g-carousel-controls button:hover::before { background: #f3ebda; }
#gallery .g-carousel-count { grid-area: 1 / 2; margin: 0; white-space: nowrap; }
#gallery .g-carousel-controls [data-gallery-action=open] {
  grid-area: 2 / 1 / 3 / -1;
  justify-self: center;
  padding-inline: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#gallery .g-instant .g-carousel-slide { transition: none; }
@media (max-width: 1023px) {
  #gallery .g-carousel { --g-card-width: clamp(300px, 47vw, 400px); --g-step: 56%; }
  #gallery .g-side-title { inset-inline-end: 46%; }
  #gallery .g-right .g-side-title { inset-inline: 46% 19px; }
}
@media (max-width: 650px) {
  #gallery .g-carousel {
    --g-card-width: min(440px, calc(100% - 12px));
    --g-image-height: clamp(173px, 52vw, 238px);
    --g-step: 96%;
  }
  #gallery .g-carousel-track { padding-block: 10px 24px; }
  #gallery .g-carousel-slide { min-height: 0; border-radius: 16px; }
  #gallery .g-carousel-slide.g-near { opacity: 0; pointer-events: none; }
  #gallery .g-carousel-slide .gallery-caption { padding: 14px 15px 17px; }
  #gallery .g-carousel-controls :is([data-gallery-action=previous],[data-gallery-action=next]) {
    flex-direction: column;
    justify-self: center;
    gap: 5px;
  }
  #gallery .g-carousel-controls [data-gallery-action=next] { justify-self: center; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  #gallery .g-carousel-slide { transition: none; }
}