```css :root{
--gp-radius: 18px;
--gp-gap: 10px;
--gp-overlay: rgba(0,0,0,.72);
} .gp-gallery{
margin: 12px 0 18px;
}
.gp-gallery__stage{
position: relative;
border-radius: var(--gp-radius);
overflow: hidden;
touch-action: pan-y;
}
.gp-gallery__img{
width: 100%;
height: auto;
display: block;
aspect-ratio: 4 / 3;
object-fit: cover;
background: #f2f3f5;
}
.gp-gallery__nav{
position:absolute;
inset: 0;
display:flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
}
.gp-gallery__btn{
pointer-events: auto;
width: 46px;
height: 46px;
border-radius: 999px;
border: none;
background: rgba(0,0,0,.35);
color: #fff;
display: grid;
place-items: center;
margin: 0 20px;
backdrop-filter: blur(6px);
-webkit-tap-highlight-color: transparent;
}
.gp-gallery__btn:active{ transform: scale(.98); }
.gp-gallery__counter{
position:absolute;
top: 10px;
right: 10px;
background: rgba(0,0,0,.38);
color: #fff;
font-size: 13px;
padding: 6px 10px;
border-radius: 999px;
backdrop-filter: blur(6px);
}
.gp-gallery__fullscreen{
pointer-events: auto;
position:absolute;
bottom: 14px;
right: 14px;
width: 42px;
height: 42px;
border-radius: 999px;
border: none;
background: rgba(0,0,0,.35);
color: #fff;
display:grid;
place-items:center;
backdrop-filter: blur(6px);
-webkit-tap-highlight-color: transparent;
} .gp-gallery__thumbs{
display:flex;
gap: var(--gp-gap);
overflow-x: auto;
padding: 10px 2px 2px; padding-right: calc(78px + env(safe-area-inset-right, 0px));
padding-left: 6px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
touch-action: pan-x; }
.gp-gallery__thumbs::-webkit-scrollbar{ display:none; } .gp-gallery__thumbs::after{
content:"";
flex: 0 0 calc(78px + env(safe-area-inset-right, 0px));
}
.gp-gallery__thumb{
flex: 0 0 auto;
width: 90px;
height: 66px;
border-radius: 14px;
overflow: hidden;
border: 2px solid transparent;
background: #f2f3f5;
-webkit-tap-highlight-color: transparent;
}
.gp-gallery__thumb img{
width:100%;
height:100%;
object-fit: cover;
display:block;
}
.gp-gallery__thumb.is-active{
border-color: #4CA24E;
} .gp-modal{
position: fixed;
inset: 0;
z-index: 999999;
background: var(--gp-overlay);
display:none;
align-items:center;
justify-content:center;
padding: 18px;
}
.gp-modal.is-open{ display:flex; }
.gp-modal__inner{
width: 100%;
max-width: 980px;
position: relative;
}
.gp-modal__img{
width: 100%;
height: auto;
display:block;
border-radius: 18px;
background: #111;
object-fit: contain;
max-height: 86vh;
}
.gp-modal__close{
position:absolute;
top: -12px;
right: -12px;
width: 44px;
height: 44px;
border-radius: 999px;
border: none;
background: rgba(0,0,0,.65);
color:#fff;
display:grid;
place-items:center;
-webkit-tap-highlight-color: transparent;
}
.gp-modal__close:active{ transform: scale(.98); } @media (min-width: 1025px){
.gp-gallery{
max-width: 760px;
}
.gp-gallery__btn{
margin: 0 16px;
width: 44px;
height: 44px;
}
.gp-gallery__thumb{
width: 86px;
height: 62px;
} .gp-gallery__thumbs{
padding-right: 60px; scroll-padding-right: 60px; overscroll-behavior-x: contain; }
.gp-gallery__thumbs::after{
content:"";
flex: 0 0 60px;
}
} body.gp-gallery-v2-on .gap-quick-gallery + .content-box,
body.gp-gallery-v2-on .gp-gallery + .content-box{
display:none !important;
}
```