@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
} @keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
} .wp-block-gallery.is-style-sngr-gallery-slider {
display: grid!important;
grid-auto-columns: 100%;
grid-auto-flow: column;
place-items: center;
gap:1rem; background:#AB9F98; width:var(--first-img-width); overflow-X: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x mandatory; anchor-name: var(--anchor-name);
> .wp-block-image{ scroll-snap-align: center; animation: linear fade-in, linear fade-out; animation-duration: auto;
animation-timeline: view(inline);
animation-range: entry 10%, exit 90%;
} &::scroll-button(*) {
position: fixed;
position-anchor: var(--anchor-name);
background: none;
border: 0;
padding: 0;
font-size: 30px;
cursor: pointer;
color:#FFFFFF;
opacity: 0.7;
z-index: 1
}
&::scroll-button(*):hover,
&::scroll-button(*):focus {
opacity: 1;
}
&::scroll-button(*):disabled {
opacity:0.2;
cursor: not-allowed;
}
&::scroll-button(right) {
position-area: inline-end center;
translate: -3rem -0.5rem;
content: "►" / attr(data-caption);
}
&::scroll-button(left) {
position-area: inline-start center;
translate: 3rem -0.5rem;
content: "◄" / attr(data-caption);
}  scroll-marker-group: after; &::scroll-marker-group {
position: fixed;
position-anchor: var(--anchor-name);
position-area: block-end; margin: -18px;
display: grid;
grid-auto-columns: 20px;
grid-auto-flow: column;
gap: 20px;
}
> .wp-block-image { &::scroll-marker {
content: "";
width: 10px;
height: 10px;
background:rgba(0,0,0,.2);
border-radius: 50%;
} &::scroll-marker:target-current {
background: #FFFFFF;
}
}
} .wp-block-gallery.has-nested-images.columns-default.is-style-sngr-gallery-slider figure.wp-block-image:not(#individual-image) {
width: 100%!important;
} @media (max-width:950px){ .wp-block-gallery.is-style-sngr-gallery-slider{
width:70%;
}
}
@media (max-width:480px){ .wp-block-gallery.is-style-sngr-gallery-slider{
width:100%;
&::scroll-marker-group {
grid-auto-columns: 15px;
gap: 15px;
}
}
}