[data-image-gallery] .real-gallery-viewport { overflow: hidden; }
[data-image-gallery] .real-gallery-track { display: flex; transition: transform .55s cubic-bezier(.22,1,.36,1); }
[data-image-gallery] .real-gallery-slide { min-width: 100%; padding: .35rem; }
[data-image-gallery] .real-gallery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.25rem; }
[data-image-gallery] .real-gallery-card { position: relative; aspect-ratio: 4/3; overflow: hidden; border: 0; border-radius: 1.25rem; background: #1b2a4e; box-shadow: 0 12px 28px rgb(27 42 78 / .13); cursor: zoom-in; }
[data-image-gallery] .real-gallery-card::after { content: "zoom_in"; font-family: "Material Symbols Outlined"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2rem; background: rgb(27 42 78 / .55); opacity: 0; transition: opacity .25s ease; }
[data-image-gallery] .real-gallery-card img { width: 100%; height: 100%; object-fit: cover; object-position: left top !important; transform-origin: left top; transition: transform .4s ease; }
[data-image-gallery] .real-gallery-card:hover img { transform: scale(1.06); }
[data-image-gallery] .real-gallery-card:hover::after,
[data-image-gallery] .real-gallery-card:focus-visible::after { opacity: 1; }
[data-image-gallery] .real-gallery-arrow { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid rgb(27 42 78 / .12); border-radius: 999px; color: #1b2a4e; background: #fff; box-shadow: 0 4px 14px rgb(27 42 78 / .1); transition: .25s ease; }
[data-image-gallery] .real-gallery-arrow:hover { color: #fff; background: #dc802c; border-color: #dc802c; }
.ig-dot { width: .65rem; height: .65rem; border-radius: 999px; background: rgb(27 42 78 / .22); transition: width .3s ease, background .3s ease; }
.ig-dot.is-active { width: 2rem; background: #dc802c; }
.real-gallery-lightbox { position: fixed; z-index: 10000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4rem 5rem; background: rgb(4 10 24 / .94); }
.real-gallery-lightbox[hidden] { display: none; }
.real-gallery-lightbox img { max-width: min(92vw, 1400px); max-height: 86vh; object-fit: contain; border-radius: .75rem; box-shadow: 0 24px 80px rgb(0 0 0 / .5); }
.real-gallery-lightbox-close,.real-gallery-lightbox-nav { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; color: #fff; background: rgb(255 255 255 / .14); transition: background .2s ease; }
.real-gallery-lightbox-close:hover,.real-gallery-lightbox-nav:hover { background: #dc802c; }
.real-gallery-lightbox-close { top: 1.25rem; right: 1.25rem; }
.real-gallery-lightbox-nav { top: 50%; transform: translateY(-50%); }
.real-gallery-lightbox-nav.is-prev { left: 1.25rem; }
.real-gallery-lightbox-nav.is-next { right: 1.25rem; }
@media (max-width: 1023px) { [data-image-gallery] .real-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; } }
@media (max-width: 639px) { [data-image-gallery] .real-gallery-grid { gap: .65rem; } [data-image-gallery] .real-gallery-card { border-radius: .85rem; } .real-gallery-lightbox { padding: 4rem .75rem; } .real-gallery-lightbox-nav { width: 2.6rem; height: 2.6rem; } .real-gallery-lightbox-nav.is-prev { left: .5rem; } .real-gallery-lightbox-nav.is-next { right: .5rem; } }
@media (prefers-reduced-motion: reduce) { [data-image-gallery] .real-gallery-track,[data-image-gallery] .real-gallery-card img { transition: none; } }