.sm-gut-gallery{
--sm-gg-cols-d: 3;
--sm-gg-cols-t: 2;
--sm-gg-cols-m: 1;
--sm-gg-card-radius: 12px;
--sm-gg-h: 260px;
--sm-gg-nav-h: 44px;
--sm-gg-gap: clamp(8px, var(--wp--style--gallery-gap, 16px), 32px);
--sm-gg-nav-bg:             #025BD6;
--sm-gg-nav-color:          #FFFFFF;
--sm-gg-nav-bg-hover:       #034FB8;
--sm-gg-nav-color-hover:    #FFFFFF;
--sm-gg-nav-bg-disabled:    #ECF2F8;
--sm-gg-nav-color-disabled: #7E8AA3;
} @media (max-width: 544px){
.sm-gut-gallery > figure.wp-block-image{ margin: 0 !important; }
.sm-gut-gallery > figure.wp-block-image img{
display:block; width:100%;
height: var(--sm-gg-h);
object-fit: cover; object-position: center;
border-radius: var(--sm-gg-card-radius);
backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0);
}
} .sm-gut-gallery.is-enhanced{
position: relative; padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0;
--wp--style--block-gap: 0 !important;
} .sm-gut-gallery__track{
box-sizing: border-box;
display: flex;
gap: var(--sm-gg-gap);
align-items: stretch;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding-top: 8px;
padding-bottom: 8px;
scrollbar-width: none;
}
.sm-gut-gallery__track::-webkit-scrollbar{ display:none; } .sm-gut-gallery__item{
flex: 0 0 calc(
(100% - var(--sm-gg-gap) * (var(--sm-gg-cols-d) - 1))
/ var(--sm-gg-cols-d)
);
scroll-snap-align: start;
scroll-snap-stop: always;
margin: 0 !important;
display: block;
}
@media (max-width: 921px){
.sm-gut-gallery__item{
flex-basis: calc(
(100% - var(--sm-gg-gap) * (var(--sm-gg-cols-t) - 1))
/ var(--sm-gg-cols-t)
);
}
}
@media (max-width: 544px){
.sm-gut-gallery__item{
flex-basis: calc(
(100% - var(--sm-gg-gap) * (var(--sm-gg-cols-m) - 1))
/ var(--sm-gg-cols-m)
);
}
} .sm-gut-gallery__item figure{ margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; }
.sm-gut-gallery__item img{
display:block;width:100%;height:var(--sm-gg-h);
object-fit:cover;object-position:center;
border-radius:var(--sm-gg-card-radius);
backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0);
} .sm-gut-gallery__nav{
display:flex;
gap:8px;
justify-content:center;
align-items:center;
margin-top:12px; z-index:2;
} @media (min-width: 545px){
figure.sm-gut-gallery.is-enhanced{
position: relative;
padding-top: var(--sm-gg-nav-h);
}
figure.sm-gut-gallery.is-enhanced .sm-gut-gallery__nav{
position: absolute !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
margin-top: 0 !important;
width: auto !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
} @media (max-width: 544px){
figure.sm-gut-gallery.is-enhanced .sm-gut-gallery__nav{
position: static !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: nowrap;
margin-left: auto;
margin-right: auto;
}
} .sm-gut-gallery__btn{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:9999px;
border:none;
background:var(--sm-gg-nav-bg); color:var(--sm-gg-nav-color);
line-height:0;padding:0;user-select:none;
}
.sm-gut-gallery__btn:not([disabled]){ cursor:pointer; }
.sm-gut-gallery__btn[disabled]{ background:var(--sm-gg-nav-bg-disabled); color:var(--sm-gg-nav-color-disabled); }
.sm-gut-gallery__btn:not([disabled]):hover{ background:var(--sm-gg-nav-bg-hover); color:var(--sm-gg-nav-color-hover); }
.sm-gut-gallery__btn svg{
width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.sm-gut-gallery__btn--prev svg{ transform: rotate(180deg); } .sm-gut-gallery.sm-gg--t1{ --sm-gg-cols-t: 1; }
.sm-gut-gallery.sm-gg--t2{ --sm-gg-cols-t: 2; }
.sm-gut-gallery.sm-gg--t3{ --sm-gg-cols-t: 3; }
.sm-gut-gallery.sm-gg--m1{ --sm-gg-cols-m: 1; }
.sm-gut-gallery.sm-gg--m2{ --sm-gg-cols-m: 2; } body.sm-gg-no-scroll { overflow: hidden; }
.sm-gg-lightbox{
position: fixed; inset: 0; z-index: 9999;
display: none;
align-items: center; justify-content: center;
background: rgba(0,0,0,.72);
padding: 24px;
}
.sm-gg-lightbox.is-open{ display: flex; }
.sm-gg-lightbox__inner{
position: relative;
max-width: 96vw; max-height: 92vh;
display: flex; flex-direction: column; align-items: center;
} .sm-gg-lightbox__img{
max-width: 80vw;
max-height: 80vh;
width: auto; height: auto; display: block;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.sm-gg-lightbox__caption{
margin-top: 12px;
color: #fff; font-size: 14px; line-height: 1.45;
max-width: 90vw; max-height: 10vh; overflow: auto;
}
.sm-gg-lightbox__btn{
position: absolute;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; line-height: 0;
border-radius: 9999px !important;
border: 1px solid rgba(255,255,255,.25) !important;
background: rgba(0,0,0,.45) !important;
color: #fff !important;
padding: 0 !important;
user-select: none; cursor: pointer;
appearance: none; -webkit-appearance: none;
box-shadow: none !important; text-decoration: none !important;
z-index: 2;
}
.sm-gg-lightbox__btn[disabled]{ opacity: .4; cursor: default; }
.sm-gg-lightbox__btn svg{
width: 18px; height: 18px; display: block;
fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
.sm-gg-lightbox__btn--close{ top: -56px; right: 0px; }
.sm-gg-lightbox__btn--prev{  left: -56px;  top: 50%; transform: translateY(-50%); }
.sm-gg-lightbox__btn--next{  right: -56px; top: 50%; transform: translateY(-50%); }
.sm-gg-lightbox__btn--prev svg{ transform: rotate(180deg); }
@media (max-width: 544px){
.sm-gg-lightbox__btn--prev,
.sm-gg-lightbox__btn--next{
top: auto; bottom: -12px; transform: none;
}
.sm-gg-lightbox__btn--prev{ left: 0; }
.sm-gg-lightbox__btn--next{ right: 0; }
} .sm-gut-gallery.sm-gg--gap32{ --sm-gg-gap: 32px; } .sm-gut-gallery .wp-block-image figcaption.wp-element-caption{ display: none !important; }
.sm-gut-gallery .blocks-gallery-caption{ display: none !important; } .sm-gut-gallery.sm-gg--cap-inline .wp-block-image figcaption.wp-element-caption{
display: block !important;
color: var(--sm-gg-cap-color, var(--sm-text, #0b0b0b)) !important;
font-size: 14px;
font-weight: 400;
text-align: center;
margin-top: 8px;
background: transparent !important;
}