.zz-multi-slider { --zzms-height-desktop: 800px;
--zzms-height-tablet: 600px;
--zzms-height-mobile: 520px; --zzms-content-max-width: 1000px; --zzms-content-text-max-width: 1000px; --zzms-overlay-color: rgba( 0, 0, 0, 0.45 );
--zzms-title-color: #ffffff;
--zzms-text-color: #f1f1f1;
--zzms-btn1-bg: #ffffff;
--zzms-btn1-color: #111111;
--zzms-btn2-bg: transparent;
--zzms-btn2-color: #ffffff;
--zzms-btn2-border: #ffffff; --zzms-pagination-color: #ffffff;
--zzms-pagination-opacity: 0.6; --zzms-pagination-color-active: #ffffff; --zzms-spinner-color: #999999; --zzms-placeholder-bg: #ffffff; --zzms-btn-radius: 4px; --zzms-hover-zoom: 1;
--zzms-hover-zoom-duration: 0.4s; --zzms-scroll-down-size: 44px;
--zzms-scroll-down-icon-size: 62%;
--zzms-scroll-down-bottom: 32px;
--zzms-scroll-down-bottom-mobile: 20px;
--zzms-scroll-down-color: #ffffff;
--zzms-scroll-down-bg: rgba( 0, 0, 0, 0.15 );
--zzms-scroll-down-bg-hover: rgba( 0, 0, 0, 0.35 );
--zzms-scroll-down-border-color: rgba( 255, 255, 255, 0.7 );
--zzms-scroll-down-border-width: 1px;
--zzms-scroll-down-bounce-duration: 2s; --zzms-scroll-offset: var( --zzms-full-height-offset ); --zzms-content-fade-duration: 500ms; --zzms-full-height-offset: 90px;
--zzms-full-height-offset-mobile: 60px; --zzms-content-box-width: 1300px;
--zzms-content-side-margin: 20px;
--zzms-content-side-margin-tablet: 50px;
--zzms-content-bottom-gap-desktop: 140px;
--zzms-content-bottom-gap-mobile: 100px;
--zzms-content-vcenter-offset: 0px;
} .zz-multi-slider,
.zz-multi-slider *,
.zz-multi-slider *::before,
.zz-multi-slider *::after {
box-sizing: border-box;
} .zz-multi-slider {
position: relative;
width: 100%;
overflow: hidden;
height: var( --zzms-height-desktop );
background: var( --zzms-placeholder-bg ); }
@media ( max-width: 1024px ) {
.zz-multi-slider {
height: var( --zzms-height-tablet );
}
}
@media ( max-width: 600px ) {
.zz-multi-slider {
height: var( --zzms-height-mobile );
}
} .zz-multi-slider.zz-multi-slider--full-height {
height: 100vh; height: calc( 100dvh - var( --zzms-full-height-offset ) ); } @media ( max-width: 992px ) {
.zz-multi-slider.zz-multi-slider--full-height {
--zzms-full-height-offset: var( --zzms-full-height-offset-mobile );
}
}
.zz-multi-slider__slide {
position: relative;
width: 100%;
height: 100%;
} .zz-multi-slider__loading-overlay {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background: var( --zzms-placeholder-bg );
transition: opacity 0.3s ease;
}
.zz-multi-slider__spinner {
width: 40px;
height: 40px;
border: 3px solid rgba( 0, 0, 0, 0.15 );
border-top-color: var( --zzms-spinner-color );
border-radius: 50%;
animation: zzms-spin 0.8s linear infinite;
}
.zz-multi-slider--ready .zz-multi-slider__loading-overlay {
opacity: 0;
pointer-events: none; }
@keyframes zzms-spin {
to {
transform: rotate( 360deg );
}
}
@media ( prefers-reduced-motion: reduce ) {
.zz-multi-slider__spinner {
animation: none; }
.zz-multi-slider__loading-overlay {
transition: none; }
} .zz-multi-slider__slide-link {
display: contents;
cursor: pointer;
} .zz-multi-slider__slide-link:hover .zz-multi-slider__bg {
transform: scale( var( --zzms-hover-zoom ) );
}
.zz-multi-slider__bg {
transition: transform var( --zzms-hover-zoom-duration ) ease;
}  .zz-multi-slider__picture {
position: absolute;
inset: 0;
display: block;
z-index: 0;
} .zz-multi-slider__picture .zz-multi-slider__bg {
position: absolute !important;
inset: 0 !important;
} .zz-multi-slider__bg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center !important;
z-index: 0;
} .zz-multi-slider__slide::before {
content: '';
position: absolute;
inset: 0;
background: var( --zzms-overlay-color );
z-index: 1;
pointer-events: none;
} .zz-multi-slider__slide--only-image::before {
background: var( --zzms-overlay-color-only-image, transparent );
} .zz-multi-slider__content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 32px 48px;
max-width: var( --zzms-content-max-width );
margin: 0 auto;
color: var( --zzms-title-color );
}
@media ( max-width: 600px ) {
.zz-multi-slider__content {
padding: 24px;
}
} .zz-multi-slider--layout-left-bottom .zz-multi-slider__content,
.zz-multi-slider--layout-left-center .zz-multi-slider__content {
align-items: flex-start;
text-align: left;
margin: 0;
padding-left: var( --zzms-content-side-margin );
padding-left: max( var( --zzms-content-side-margin ), calc( ( 100vw - var( --zzms-content-box-width ) ) / 2 ) );
padding-right: var( --zzms-content-side-margin ); max-width: none;
} .zz-multi-slider--layout-left-bottom .zz-multi-slider__title,
.zz-multi-slider--layout-left-bottom .zz-multi-slider__text,
.zz-multi-slider--layout-left-center .zz-multi-slider__title,
.zz-multi-slider--layout-left-center .zz-multi-slider__text {
width: 100%;
max-width: var( --zzms-content-text-max-width );
} @media ( min-width: 993px ) and ( max-width: 1400px ) {
.zz-multi-slider--layout-left-bottom .zz-multi-slider__content,
.zz-multi-slider--layout-left-center .zz-multi-slider__content {
padding-left: var( --zzms-content-side-margin-tablet );
}
} .zz-multi-slider--layout-left-bottom .zz-multi-slider__content {
justify-content: flex-end;
padding-bottom: var( --zzms-content-bottom-gap-desktop );
}
@media ( max-width: 600px ) {
.zz-multi-slider--layout-left-bottom .zz-multi-slider__content {
padding-bottom: var( --zzms-content-bottom-gap-mobile );
}
} .zz-multi-slider--layout-left-center .zz-multi-slider__content {
justify-content: center; transform: translateY( var( --zzms-content-vcenter-offset, 0 ) );
} .zz-multi-slider--fade-content .zz-multi-slider__content {
opacity: 0;
transition: opacity var( --zzms-content-fade-duration ) ease;
}
.zz-multi-slider--fade-content .zz-multi-slider__content.is-visible {
opacity: 1;
}
.zz-multi-slider__title {
font-size: clamp( 1.6rem, 4vw, 2.75rem );
line-height: 1.15;
margin: 0 0 12px;
color: var( --zzms-title-color );
}
.zz-multi-slider__text {
font-size: clamp( 0.95rem, 1.6vw, 1.15rem );
line-height: 1.5;
margin: 0 0 20px;
color: var( --zzms-text-color );
} .zz-multi-slider__buttons {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 14px;
width: max-content;
max-width: 100%;
margin-inline: auto; } .zz-multi-slider--layout-left-bottom .zz-multi-slider__buttons,
.zz-multi-slider--layout-left-center .zz-multi-slider__buttons {
margin-inline: 0;
} @media ( max-width: 600px ) {
.zz-multi-slider__buttons {
grid-auto-flow: row;
grid-auto-columns: auto;
}
}
.zz-multi-slider__btn {
display: inline-block;
padding: 12px 26px;
border-radius: var( --zzms-btn-radius );
text-decoration: none;
font-weight: 600;
text-align: center; transition: opacity 0.2s ease, transform 0.2s ease;
}
.zz-multi-slider__btn--1 {
background: var( --zzms-btn1-bg );
color: var( --zzms-btn1-color );
}
.zz-multi-slider__btn--2 {
background: var( --zzms-btn2-bg );
color: var( --zzms-btn2-color );
border: 1px solid var( --zzms-btn2-border );
}
.zz-multi-slider__btn:hover,
.zz-multi-slider__btn:focus-visible {
opacity: 0.85;
transform: translateY( -1px );
} .zz-multi-slider__arrow {
color: #fff;
--swiper-navigation-size: 22px;
}
.zz-multi-slider__arrow::after {
font-size: var( --swiper-navigation-size );
}
@media ( max-width: 600px ) {
.zz-multi-slider__arrow {
display: none; }
} .zz-multi-slider__pagination {
bottom: 20px !important;
}
.zz-multi-slider .swiper-pagination-bullet {
background: var( --zzms-pagination-color );
opacity: var( --zzms-pagination-opacity );
}
.zz-multi-slider .swiper-pagination-bullet-active {
background: var( --zzms-pagination-color-active );
opacity: 1;
} .zz-multi-slider__scroll-down {
position: absolute;
bottom: var( --zzms-scroll-down-bottom );
left: 50%;
transform: translateX( -50% );
z-index: 11; display: flex;
align-items: center;
justify-content: center;
width: var( --zzms-scroll-down-size );
height: var( --zzms-scroll-down-size );
padding: 0;
margin: 0;
background: var( --zzms-scroll-down-bg );
border: var( --zzms-scroll-down-border-width ) solid var( --zzms-scroll-down-border-color );
border-radius: 50%;
color: var( --zzms-scroll-down-color );
cursor: pointer;
-webkit-appearance: none;
appearance: none; transition: opacity 0.4s ease, visibility 0.4s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.zz-multi-slider__scroll-down svg {
width: var( --zzms-scroll-down-icon-size );
height: var( --zzms-scroll-down-icon-size );
display: block; animation: zzms-scroll-bounce var( --zzms-scroll-down-bounce-duration ) ease-in-out infinite;
}
@keyframes zzms-scroll-bounce {
0%, 100% { transform: translateY( -15% ); }
50%      { transform: translateY( 15% ); }
}
.zz-multi-slider__scroll-down:hover,
.zz-multi-slider__scroll-down:focus-visible {
background: var( --zzms-scroll-down-bg-hover );
border-color: var( --zzms-scroll-down-color );
} .zz-multi-slider__scroll-down.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@media ( max-width: 600px ) {
.zz-multi-slider__scroll-down {
bottom: var( --zzms-scroll-down-bottom-mobile );
}
}
@media ( prefers-reduced-motion: reduce ) {
.zz-multi-slider__scroll-down svg {
animation: none;
}
.zz-multi-slider__scroll-down {
transition: none;
}
} @media ( prefers-reduced-motion: reduce ) {
.zz-multi-slider__btn {
transition: none;
} .zz-multi-slider__bg {
transition: none;
}
.zz-multi-slider__slide-link:hover .zz-multi-slider__bg {
transform: none;
}
.zz-multi-slider--fade-content .zz-multi-slider__content {
transition: none;
opacity: 1; }
}