.hsl-slider {
--hsl-pad: clamp(20px, 4vw, 40px);
--hsl-gutter: clamp(24px, 5vw, 80px);
--hsl-arrow-space: 0px;
--hsl-anim-delay: calc(var(--hsl-speed, 1000ms) * 0.35);
position: relative;
width: 100%;
overflow: hidden;
visibility: visible;
}
.hsl-slider.hsl-has-arrows { --hsl-arrow-space: 92px; }
.hsl-slider *,
.hsl-slider *::before,
.hsl-slider *::after { box-sizing: border-box; }
.hsl-slider.hsl-fullbleed {
width: var(--hsl-vw, 100vw);
max-width: none !important;
margin-left: calc(50% - var(--hsl-vw, 100vw) / 2) !important;
margin-right: calc(50% - var(--hsl-vw, 100vw) / 2) !important;
} .hsl-slider:not(.is-initialized) .splide__list { display: flex; }
.hsl-slider:not(.is-initialized) .splide__slide { width: 100%; }
.hsl-slider:not(.is-initialized) .splide__slide:not(:first-child) { display: none; } .hsl-slider .hsl-slide {
position: relative;
display: grid;
min-height: var(--hsl-h-d, 85vh);
background: var(--hsl-bg, transparent);
color: var(--hsl-fg, inherit);
overflow: hidden;
container-type: inline-size;
}
.hsl-body {
--hsl-edge: max(var(--hsl-pad), var(--hsl-arrow-space), calc((100cqw - var(--hsl-container, 1200px)) / 2));
position: relative;
z-index: 2;
display: flex;
align-items: center;
min-width: 0;
padding: clamp(48px, 7vw, 112px) var(--hsl-edge);
}
.hsl-content {
position: relative;
width: 100%;
max-width: var(--hsl-content-w, 620px);
padding: var(--hsl-box-pad, 0);
background: var(--hsl-box-bg, transparent);
border: var(--hsl-box-border, 0 solid transparent);
border-radius: var(--hsl-box-r, 0);
box-shadow: var(--hsl-box-shadow, none);
-webkit-backdrop-filter: var(--hsl-box-blur, none);
backdrop-filter: var(--hsl-box-blur, none);
font-family: inherit;
}
.hsl-xf .hsl-content { font-family: var(--hsl-text-font); } .hsl-slider .hsl-layout-none,
.hsl-slider .hsl-layout-background { grid-template-columns: minmax(0, 1fr); }
.hsl-slider .hsl-layout-image-left { grid-template-columns: var(--hsl-img-w, 50%) minmax(0, 1fr); }
.hsl-slider .hsl-layout-image-right { grid-template-columns: minmax(0, 1fr) var(--hsl-img-w, 50%); }
.hsl-layout-image-right .hsl-media { order: 2; }
.hsl-layout-image-left .hsl-body { padding-left: var(--hsl-gutter); }
.hsl-layout-image-right .hsl-body { padding-right: var(--hsl-gutter); }
.hsl-media {
position: relative;
overflow: hidden;
min-width: 0;
}
.hsl-media picture { position: absolute; inset: 0; display: block; }
.hsl-slider .hsl-media img.hsl-img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
border-radius: 0;
object-fit: var(--hsl-img-fit, cover);
object-position: var(--hsl-img-pos, center);
}
.hsl-fit-contain .hsl-media img.hsl-img { padding: clamp(16px, 3vw, 48px); } .hsl-layout-background .hsl-media { position: absolute; inset: 0; z-index: 0; }
.hsl-overlay {
position: absolute;
inset: 0;
background: var(--hsl-ov, #000);
opacity: var(--hsl-ov-o, 0.4);
pointer-events: none;
}  .hsl-align-left .hsl-content { text-align: left; }
.hsl-align-center .hsl-content { text-align: center; }
.hsl-align-right .hsl-content { text-align: right; } .hsl-bx-left .hsl-content { margin-left: 0; margin-right: auto; }
.hsl-bx-center .hsl-content { margin-left: auto; margin-right: auto; }
.hsl-bx-right .hsl-content { margin-left: auto; margin-right: 0; }
.hsl-slider .hsl-by-top .hsl-body { align-items: flex-start; }
.hsl-slider .hsl-by-center .hsl-body { align-items: center; }
.hsl-slider .hsl-by-bottom .hsl-body { align-items: flex-end; } .hsl-media { background: var(--hsl-media-bg, transparent); }
.hsl-body { background: var(--hsl-body-bg, transparent); }
.hsl-layout-background .hsl-body { background: none; } .hsl-slider .hsl-bx-center.hsl-layout-image-left .hsl-body,
.hsl-slider .hsl-bx-center.hsl-layout-image-right .hsl-body {
padding-left: max(var(--hsl-gutter), var(--hsl-arrow-space));
padding-right: max(var(--hsl-gutter), var(--hsl-arrow-space));
}
.hsl-slider .hsl-eyebrow {
margin: 0 0 1rem;
font-size: var(--hsl-eb-size, 13px);
font-weight: 600;
letter-spacing: var(--hsl-eb-ls, 0.08em);
text-transform: var(--hsl-eb-tt, uppercase);
opacity: 0.85;
color: var(--hsl-eb-color, inherit);
}
.hsl-slider .hsl-title {
margin: 0 0 var(--hsl-title-mb, 20px);
font-size: var(--hsl-title);
line-height: var(--hsl-title-lh, 1.1);
letter-spacing: var(--hsl-title-ls, 0);
color: var(--hsl-title-color, inherit);
text-wrap: balance;
}
.hsl-tf .hsl-title { font-family: var(--hsl-title-font); }
.hsl-tw .hsl-title { font-weight: var(--hsl-title-w); }
.hsl-slider .hsl-title span { color: var(--hsl-accent, inherit); }
.hsl-slider .hsl-text { font-size: var(--hsl-text); line-height: var(--hsl-text-lh, 1.6); color: var(--hsl-text-color, inherit); }
.hsl-slider .hsl-text > * { margin: 0 0 var(--hsl-p-gap, 16px); color: inherit; font-size: inherit; line-height: inherit; }
.hsl-slider .hsl-text > *:last-child { margin-bottom: 0; }
.hsl-slider .hsl-text a { color: inherit; }
.hsl-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px 14px;
margin-top: var(--hsl-btns-mt, 32px);
}
.hsl-content > .hsl-buttons:first-child { margin-top: 0; }
.hsl-align-center .hsl-buttons { justify-content: center; }
.hsl-align-right .hsl-buttons { justify-content: flex-end; }
.hsl-slider a.hsl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: var(--hsl-btn-pad, 0.95em 1.7em);
border: 2px solid transparent;
border-radius: var(--hsl-btn-r, 6px);
font-family: inherit;
font-size: var(--hsl-btn-size, 16px);
font-weight: var(--hsl-btn-w, 600);
letter-spacing: var(--hsl-btn-ls, 0);
text-transform: var(--hsl-btn-tt, none);
line-height: 1.2;
text-decoration: none;
box-shadow: none;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}
.hsl-slider a.hsl-btn:hover { transform: translateY(-1px); }
.hsl-slider a.hsl-btn--primary {
background: var(--hsl-btn-bg, #111);
border-color: var(--hsl-btn-bg, #111);
color: var(--hsl-btn-color, #fff);
}
.hsl-slider a.hsl-btn--primary:hover { filter: brightness(1.12); color: var(--hsl-btn-color, #fff); }
.hsl-slider a.hsl-btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.hsl-slider a.hsl-btn--outline:hover { background: rgba(127, 127, 127, 0.14); color: inherit; }
.hsl-slider a.hsl-btn--link {
padding-left: 0;
padding-right: 0;
border: 0;
border-radius: 0;
background: none;
color: inherit;
text-decoration: underline;
text-underline-offset: 0.3em;
text-decoration-thickness: 1px;
}
.hsl-slider a.hsl-btn--link:hover { text-underline-offset: 0.45em; transform: none; } .hsl-slider .splide__arrow {
position: absolute;
top: 50%;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
min-width: 0;
margin: 0;
padding: 0;
border: 1px solid color-mix(in srgb, var(--hsl-ui, #fff) 45%, transparent);
border-radius: 50%;
background: rgba(0, 0, 0, 0.22);
color: var(--hsl-ui, #fff);
box-shadow: none;
cursor: pointer;
transform: translateY(-50%);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: background-color 0.25s ease, opacity 0.25s ease;
}
.hsl-slider .splide__arrow:hover { background: rgba(0, 0, 0, 0.42); }
.hsl-slider .splide__arrow:disabled { opacity: 0.3; cursor: default; }
.hsl-slider .splide__arrow--prev { left: clamp(12px, 2vw, 28px); }
.hsl-slider .splide__arrow--next { right: clamp(12px, 2vw, 28px); }
.hsl-slider .splide__arrow svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.hsl-slider .splide__arrow--prev svg { transform: scaleX(-1); }
.hsl-slider .splide__pagination {
position: absolute;
left: 0;
right: 0;
bottom: clamp(14px, 2.5vw, 28px);
z-index: 5;
gap: 10px;
padding: 0;
}
.hsl-slider .splide__pagination li { margin: 0; padding: 0; line-height: 0; }
.hsl-slider .splide__pagination li::before { display: none; }
.hsl-slider .splide__pagination__page {
display: block;
width: 10px;
height: 10px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 999px;
background: color-mix(in srgb, var(--hsl-ui, #fff) 45%, transparent);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: width 0.35s ease, background-color 0.35s ease;
}
.hsl-slider .splide__pagination__page.is-active { width: 28px; background: var(--hsl-ui, #fff); }
.hsl-slider .splide__progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
height: 3px;
background: color-mix(in srgb, var(--hsl-ui, #fff) 20%, transparent);
}
.hsl-slider .splide__progress__bar { height: 100%; background: var(--hsl-ui, #fff); } .hsl-js .hsl-anim {
opacity: 0;
transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
will-change: opacity, transform;
}
.hsl-anim-fade-up.hsl-js .hsl-anim { transform: translateY(28px); }
.hsl-anim-blur.hsl-js .hsl-anim { filter: blur(12px); transform: scale(0.98); }
.hsl-anim-slide.hsl-js .hsl-anim { transform: translateX(-40px); }
.hsl-anim-slide.hsl-js .hsl-align-right .hsl-anim { transform: translateX(40px); }
.hsl-js .is-active .hsl-anim {
opacity: 1;
transform: none;
filter: none;
transition:
opacity var(--hsl-anim-d) cubic-bezier(0.22, 1, 0.36, 1),
transform var(--hsl-anim-d) cubic-bezier(0.22, 1, 0.36, 1),
filter var(--hsl-anim-d) cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--hsl-anim-delay) + var(--hsl-i, 0) * var(--hsl-stagger, 120ms));
}
.hsl-js .hsl-has-box .hsl-content { opacity: 0; transform: translateY(16px); transition: opacity 0.35s ease, transform 0.35s ease; }
.hsl-js .hsl-has-box.is-active .hsl-content {
opacity: 1;
transform: none;
transition: opacity var(--hsl-anim-d) cubic-bezier(0.22, 1, 0.36, 1), transform var(--hsl-anim-d) cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--hsl-anim-delay) * 0.6);
}
.hsl-anim-none.hsl-js .hsl-has-box .hsl-content { opacity: 1; transform: none; transition: none; }
.hsl-anim-none.hsl-js .hsl-anim { opacity: 1; transform: none; filter: none; transition: none; }
.hsl-instant .hsl-anim,
.hsl-instant .hsl-has-box .hsl-content { transition: none !important; } .hsl-kb .hsl-media img.hsl-img {
transform: scale(1);
transition: transform 0s linear var(--hsl-speed);
}
.hsl-kb .is-active .hsl-media img.hsl-img {
transform: scale(1.07);
transition: transform calc(var(--hsl-interval) + var(--hsl-speed) * 2) linear;
} .hsl-autoh .splide__list { align-items: flex-start; }
.hsl-autoh .splide__track { transition: height calc(var(--hsl-speed, 1000ms) * 0.6) cubic-bezier(0.65, 0, 0.35, 1); } @media (max-width: 1024px) {
.hsl-slider.hsl-has-arrows { --hsl-arrow-space: 76px; }
.hsl-slider .hsl-slide { min-height: var(--hsl-h-t, 70vh); }
.hsl-slider .hsl-layout-image-left,
.hsl-slider .hsl-layout-image-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hsl-stack-tablet .hsl-layout-image-left,
.hsl-stack-tablet .hsl-layout-image-right { grid-template-columns: minmax(0, 1fr); align-content: start; }
.hsl-stack-tablet .hsl-layout-image-left .hsl-media,
.hsl-stack-tablet .hsl-layout-image-right .hsl-media { order: 0; height: var(--hsl-mimg-h, 300px); }
.hsl-stack-tablet .hsl-m-text-first .hsl-media { order: 2 !important; }
.hsl-stack-tablet .hsl-media--empty { display: none; }
.hsl-stack-tablet .hsl-layout-image-left .hsl-body,
.hsl-stack-tablet .hsl-layout-image-right .hsl-body { padding: var(--hsl-m-pt, 36px) var(--hsl-pad) var(--hsl-m-pb, 56px); }
}
@media (max-width: 767px) {
.hsl-slider.hsl-has-arrows { --hsl-arrow-space: 0px; }
.hsl-slider .hsl-slide { min-height: var(--hsl-h-m, auto); }
.hsl-slider .splide__arrow { display: none; }
.hsl-stack-mobile .hsl-layout-image-left,
.hsl-stack-mobile .hsl-layout-image-right { grid-template-columns: minmax(0, 1fr); align-content: start; }
.hsl-stack-mobile .hsl-layout-image-left .hsl-media,
.hsl-stack-mobile .hsl-layout-image-right .hsl-media { order: 0; height: var(--hsl-mimg-h, 300px); }
.hsl-stack-mobile .hsl-m-text-first .hsl-media { order: 2 !important; }
.hsl-stack-mobile .hsl-media--empty { display: none; }
.hsl-slider .hsl-body,
.hsl-slider .hsl-layout-image-left .hsl-body,
.hsl-slider .hsl-layout-image-right .hsl-body { padding: var(--hsl-m-pt, 36px) var(--hsl-pad) var(--hsl-m-pb, 56px); }
.hsl-buttons { gap: 10px; }
.hsl-btn-full-m .hsl-buttons a.hsl-btn:not(.hsl-btn--link) { flex: 1 1 100%; } .hsl-slider .hsl-am-left .hsl-content { text-align: left; margin-left: 0; margin-right: auto; }
.hsl-slider .hsl-am-center .hsl-content { text-align: center; margin-left: auto; margin-right: auto; }
.hsl-slider .hsl-am-right .hsl-content { text-align: right; margin-left: auto; margin-right: 0; }
.hsl-slider .hsl-am-left .hsl-buttons { justify-content: flex-start; }
.hsl-slider .hsl-am-center .hsl-buttons { justify-content: center; }
.hsl-slider .hsl-am-right .hsl-buttons { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
.hsl-js .hsl-has-box .hsl-content { opacity: 1 !important; transform: none !important; transition: none !important; }
.hsl-js .hsl-anim { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.hsl-kb .hsl-media img.hsl-img { transform: none !important; transition: none !important; }
}