/* Shared gallery scroller — turns an example/gallery strip into a horizontal
   carousel with ‹ › arrow controls matching the homepage hero (.hvC__arr).
   Applied to any element with class "gx-scroll"; the JS (gx-scroller.js)
   wraps it, injects the arrows, and shows them only when the row overflows. */
.gx-wrap{position:relative}
.gx-scroll{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}
.gx-scroll::-webkit-scrollbar{display:none}
.gx-scroll>*{flex:0 0 clamp(150px,21%,220px);scroll-snap-align:start}
.gx-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(11,12,14,.74);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .15s,background .15s}
.gx-arr:hover{border-color:#fff;background:rgba(11,12,14,.92)}
.gx-arr svg{width:18px;height:18px}
.gx-arr.gx-prev{left:8px}
.gx-arr.gx-next{right:8px}
.gx-wrap.gx-has-prev .gx-arr.gx-prev{display:inline-flex}
.gx-wrap.gx-has-next .gx-arr.gx-next{display:inline-flex}
@media(prefers-reduced-motion:reduce){.gx-scroll{scroll-behavior:auto}}