#gallery { --gl3-gutter: calc(8% + 20px); padding: 80px var(--gl3-gutter); background: #f4f4f4; color: #30353A; }
#gallery p { margin: 0; }

#gallery .gl3__head { display: grid; gap: 16px; justify-items: center; text-align: center; margin-bottom: 32px; }

#gallery .gl3__eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #30353A; }
#gallery h2 { margin: 0; padding: 0; max-width: 22em; font-weight: 700; font-size: 32px; line-height: 1.25; color: #30353A; text-transform: none; letter-spacing: 0; }
#gallery .gl3__lede { max-width: 40em; margin-inline: auto; font-size: 17px; line-height: 1.6; color: #555b61; }

#gallery .gl3__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 8px; }
#gallery .gl3__cell { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; } 
#gallery .gl3__cell--feature { grid-column: 1 / -1; }
#gallery .gl3__cell picture { display: block; }
#gallery .gl3__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

#gallery .gl3__ask { margin-top: 8px; text-align: center; }
#gallery .gl3__btn { display: inline-block; padding: 12px 25px; border-radius: 500px; background: #D8B98A; color: #30353A; font-family: 'Inter', Arial, sans-serif; font-weight: 800; font-size: 14px; line-height: 1.4; text-decoration: none; }
#gallery .gl3__btn:hover { background: #e6d0aa; color: #30353A; }
#gallery .gl3__btn:focus-visible { outline: 2px solid #30353A; outline-offset: 3px; }

@media only screen and (min-width: 768px) {
  #gallery .gl3__ask { display: none; }
  #gallery .gl3__head { margin-bottom: 48px; }
  #gallery .gl3__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  #gallery .gl3__cell--feature { grid-row: span 2; aspect-ratio: auto; }
  #gallery .gl3__cell:nth-child(10n + 1) { grid-column: 1 / span 2; }
  #gallery .gl3__cell:nth-child(10n + 6),
  #gallery .gl3__cell:nth-child(10n + 8) { grid-column: 1; }
  #gallery .gl3__cell:nth-child(10n + 7),
  #gallery .gl3__cell:nth-child(10n + 9) { grid-column: 2; }
  #gallery .gl3__cell:nth-child(10n + 10) { grid-column: 3 / span 2; }
}
@media only screen and (min-width: 992px) {
  #gallery .gl3__grid { gap: 24px; }
}
@media only screen and (max-width: 980px) {
  #gallery { --gl3-gutter: 40px; padding-block: 60px; }
  #gallery h2 { font-size: 26px; line-height: 35px; }
}


#gallery .gl3__open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
#gallery .gl3__open img { transition: transform 0.3s ease; }
#gallery .gl3__open:hover img { transform: scale(1.03); }
#gallery .gl3__open:focus-visible { outline: 3px solid #D8B98A; outline-offset: -3px; }
#gallery .gl3__chip { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 4px 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.94); color: #30353A; font-family: 'Inter', Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; }

#gallery .gl3__box { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 22, 25, 0.96); color: #fff; }
#gallery .gl3__box::backdrop { background: rgba(20, 22, 25, 0.96); }
#gallery .gl3__fig { display: grid; place-items: center; align-content: center; gap: 12px; height: 100%; margin: 0; padding: 56px 64px; box-sizing: border-box; pointer-events: none; }
#gallery .gl3__big { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 3px; pointer-events: auto; }
#gallery .gl3__ctl { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }
#gallery .gl3__ctl:hover { background: rgba(255, 255, 255, 0.24); }
#gallery .gl3__ctl:focus-visible { outline: 2px solid #D8B98A; outline-offset: 2px; }
#gallery .gl3__ctl--close { top: 12px; right: 12px; }
#gallery .gl3__ctl--prev { left: 12px; top: 50%; transform: translateY(-50%); }
#gallery .gl3__ctl--next { right: 12px; top: 50%; transform: translateY(-50%); }
@media only screen and (max-width: 767px) {
  #gallery .gl3__chip { display: none; } 
  #gallery .gl3__fig { padding: 64px 12px 88px; }
  #gallery .gl3__big { max-height: calc(100vh - 190px); }
  #gallery .gl3__ctl--prev, #gallery .gl3__ctl--next { top: auto; bottom: 20px; transform: none; }
  #gallery .gl3__ctl--prev { left: calc(50% - 60px); }
  #gallery .gl3__ctl--next { right: calc(50% - 60px); }
}


@media only screen and (max-width: 479px) {
  #gallery { --gl3-gutter: 24px; }
}


#gallery.is-white { background: #fff; }
#gallery .gl3__filters { display: flex; justify-content: center; margin: 0 0 32px; }
#gallery .gl3__filters[hidden] { display: none; }
#gallery .gl3__track { position: relative; display: flex; max-width: 100%; padding: 4px; border: 1px solid #e3e5e8; border-radius: 500px; background: #f4f4f4; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; box-sizing: border-box; }
#gallery .gl3__track::-webkit-scrollbar { display: none; }
#gallery .gl3__pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 500px; background: #D8B98A; pointer-events: none; }
#gallery .gl3__pill.is-moving { transition: transform 250ms ease-out, width 250ms ease-out; }
#gallery .gl3__filter { position: relative; z-index: 1; flex: 0 0 auto; margin: 0; padding: 10px 22px; border: 0; border-radius: 500px; background: none; color: #555b61; font-family: 'Inter', Arial, sans-serif; font-weight: 800; font-size: 14px; line-height: 1.4; white-space: nowrap; cursor: pointer; scroll-snap-align: center; transition: color 150ms ease-out; }
#gallery .gl3__filter:hover, #gallery .gl3__filter:focus-visible { color: #30353A; }
#gallery .gl3__filter[aria-pressed="true"] { color: #30353A; }
#gallery .gl3__filter:focus-visible { outline: 2px solid #30353A; outline-offset: -2px; }
#gallery .gl3__grid { transition: opacity 200ms ease-out; }
#gallery .gl3__grid.is-fading { opacity: 0; transition: opacity 150ms ease-out; }
@media only screen and (max-width: 479px) {
  #gallery .gl3__filter { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #gallery .gl3__pill.is-moving, #gallery .gl3__grid, #gallery .gl3__grid.is-fading, #gallery .gl3__filter { transition: none; }
}
#gallery .gl3__cell[hidden] { display: none; }


@media only screen and (min-width: 768px) {
  #gallery .gl3__cell[data-pos="0"] { grid-column: 1 / span 2; }
  #gallery .gl3__cell[data-pos="1"],
  #gallery .gl3__cell[data-pos="2"],
  #gallery .gl3__cell[data-pos="3"],
  #gallery .gl3__cell[data-pos="4"] { grid-column: auto; }
  #gallery .gl3__cell[data-pos="5"],
  #gallery .gl3__cell[data-pos="7"] { grid-column: 1; }
  #gallery .gl3__cell[data-pos="6"],
  #gallery .gl3__cell[data-pos="8"] { grid-column: 2; }
  #gallery .gl3__cell[data-pos="9"] { grid-column: 3 / span 2; }
}