.yd_gallery_scroll {
--ydgs-gap: 16px;
--ydgs-item-w: 260px;
--ydgs-item-h: 380px;
--ydgs-radius: 12px;
--ydgs-arrow-bg: #ffcc00;
--ydgs-arrow-color: #111111;
--ydgs-dot: #d9d9d9;
--ydgs-dot-active: #ffcc00;
--ydgs-block-bg: transparent;
--ydgs-pad-t: 28px;
--ydgs-pad-b: 40px;
padding-top: var(--ydgs-pad-t);
padding-bottom: var(--ydgs-pad-b);
margin-bottom: 40px;
}
.yd_gallery_scroll.has-block-bg {
background-color: var(--ydgs-block-bg);
}
.yd_gallery_scroll.is-full-bleed {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
}
.yd_gallery_scroll-wrap {
position: relative;
}
.yd_gallery_scroll__viewport {
position: relative;
display: flex;
align-items: center;
}
.yd_gallery_scroll__track {
display: flex;
gap: var(--ydgs-gap);
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 4px 2px 8px;
} .yd_gallery_scroll.is-compact .yd_gallery_scroll__track {
justify-content: center;
overflow-x: hidden;
scroll-snap-type: none;
}
.yd_gallery_scroll.is-compact .yd_gallery_scroll__arrow,
.yd_gallery_scroll.is-compact .yd_gallery_scroll__dots {
display: none !important;
}
.yd_gallery_scroll__track::-webkit-scrollbar {
display: none;
}
.yd_gallery_scroll__slide {
flex: 0 0 var(--ydgs-item-w);
width: var(--ydgs-item-w);
height: var(--ydgs-item-h);
max-width: 85vw;
scroll-snap-align: start;
border-radius: var(--ydgs-radius);
overflow: hidden;
background: #f3f4f6;
text-decoration: none;
color: inherit;
display: block;
box-sizing: border-box;
}
.yd_gallery_scroll__slide.is-lightbox {
cursor: zoom-in;
}
.yd_gallery_scroll__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.yd_gallery_scroll__placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.yd_gallery_scroll__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: var(--ydgs-arrow-bg);
color: var(--ydgs-arrow-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
padding: 0;
}
.yd_gallery_scroll__arrow:hover {
transform: translateY(-50%) scale(1.04);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.yd_gallery_scroll__arrow:disabled {
opacity: 0.35;
cursor: default;
transform: translateY(-50%);
box-shadow: none;
}
.yd_gallery_scroll__arrow--prev {
left: 8px;
}
.yd_gallery_scroll__arrow--next {
right: 8px;
}
.yd_gallery_scroll__dots {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 18px;
padding-bottom: 4px;
}
.yd_gallery_scroll__dot {
width: 10px;
height: 10px;
border-radius: 999px;
border: 0;
padding: 0;
background: var(--ydgs-dot);
cursor: pointer;
transition: background 160ms ease, transform 160ms ease;
}
.yd_gallery_scroll__dot.is-active {
background: var(--ydgs-dot-active);
transform: scale(1.12);
}
@media (max-width: 782px) {
.yd_gallery_scroll {
--ydgs-pad-t: 20px;
--ydgs-pad-b: 32px;
}
.yd_gallery_scroll.is-full-bleed {
padding-left: 12px;
padding-right: 12px;
}
.yd_gallery_scroll__arrow {
width: 38px;
height: 38px;
}
.yd_gallery_scroll__arrow--prev {
left: 4px;
}
.yd_gallery_scroll__arrow--next {
right: 4px;
}
.yd_gallery_scroll__slide { flex-basis: min(var(--ydgs-item-w), 72vw);
width: min(var(--ydgs-item-w), 72vw);
height: min(var(--ydgs-item-h), 68vw);
}
} .yd_gallery_lightbox {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 12, 16, 0.88);
padding: 24px;
box-sizing: border-box;
}
.yd_gallery_lightbox[hidden] {
display: none !important;
}
html.yd_gallery_lightbox-open,
html.yd_gallery_lightbox-open body {
overflow: hidden;
overscroll-behavior: none;
}
.yd_gallery_lightbox__stage {
max-width: min(1100px, 92vw);
max-height: 88vh;
}
.yd_gallery_lightbox__img {
display: block;
max-width: 100%;
max-height: 88vh;
width: auto;
height: auto;
border-radius: 8px;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.yd_gallery_lightbox__close {
position: absolute;
top: 16px;
right: 16px;
width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.yd_gallery_lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: #ffcc00;
color: #111;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.yd_gallery_lightbox__nav--prev {
left: 16px;
}
.yd_gallery_lightbox__nav--next {
right: 16px;
}
@media (max-width: 782px) {
.yd_gallery_lightbox__nav--prev {
left: 8px;
}
.yd_gallery_lightbox__nav--next {
right: 8px;
}
}