/* @group @m-hero-slider */

[class*="m-hero-slider"] {
position: relative;
visibility: hidden;
opacity: 0;
transition: opacity var(--transition-time) 0s var(--transition-cubic-bezier);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

[class*="m-hero-slider"][class*="is-active"] {
visibility: visible;
opacity: 1;
}

@media (scripting: none) {

[class*="m-hero-slider"] {
visibility: visible;
opacity: 1;
}

}

/* @end @m-hero-slider */

/* @group @m-hero-slider */

[class*="m-hero-slider"] {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: var(--x-padding-left) 1.5rem 1fr 1.5rem var(--x-padding-right);
grid-template-rows: 1.5rem 1fr 1.5rem 3rem 1.5rem 1.5rem;
}

[class*="m-hero-root-body"] {
grid-column: 1 / span 5;
grid-row: 2;
}
[class*="splide__track"] {
grid-column: 1 / span 5;
grid-row: 1 / span 6;
}

[class*="m-splide-pagination"] {
position: relative;
z-index: 3;
grid-column: 3;
grid-row: 5;
}

[class*="a-root-hero-scroll"] {
grid-column: 2;
grid-row: 3;
grid-row: 4 / span 2;
}

/* @end @m-hero-slider */

/* -------------------------------------------------------- */

/* @group @splide */

[class*="splide--draggable"] [class*="splide__track"] {
-webkit-user-select: none;
user-select: none;
}

/* @end @splide */

/* -------------------------------------------------------- */

/* @group @splide */

[class*="splide__track"],
[class*="splide__list"],
[class*="splide__list"] * {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

/* @end @splide */

/* @group @splide__track */

[class*="splide__track"] {
overflow: hidden;
}

/* @end @splide__track */

/* @group @splide--slide */

[class*="splide__list"] {
display: inline-flex;
width: 100%;
height: 100%;
}

/* @end @splide--slide */

/* @group @splide__slide */

[class*="splide__slide"] {
flex-shrink: 0;
}

/* @end @splide__slide */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="splide--fade"] [class*="splide__slide"] {
--splide-slide-position: absolute;
--splide-slide-z-index: 0;
--splide-slide-opacity: 0;
}

[class*="splide--fade"] [class*="splide__slide"][class*="is-active"] {
/*--splide-slide-position: relative;*/
--splide-slide-position: absolute;
--splide-slide-z-index: 1;
--splide-slide-opacity: 1;
}

/* @end @variables */

/* @group @splide--fade */

[class*="splide--fade"] [class*="splide__list"] {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}

[class*="splide--fade"] [class*="splide__slide"] {
grid-column: 1;
grid-row: 1;
display: grid;
visibility: var(--splide-slide-visibility);
will-change: transform, opacity;
}

/* @end @splide--fade */

/* @group @splide--fade */

[class*="splide--fade"] [class*="splide__slide"] {
position: var(--splide-slide-position);
z-index: var(--splide-slide-z-index);
opacity: var(--splide-slide-opacity);
transition: display var(--transition-time) 0s var(--transition-cubic-bezier), opacity var(--transition-time) 0s var(--transition-cubic-bezier), visibility var(--transition-time) 0s var(--transition-cubic-bezier);
}

/* @end @splide--fade */

/* -------------------------------------------------------- */

/* @group @m-splide-pagination */

[class*="m-splide-pagination"] {
display: flex;
justify-content: center;
margin-bottom: 0;
gap: .75rem;
}

@media (scripting: none) {

[class*="m-splide-pagination"] {
visibility: hidden;
opacity: 0;
}

}

[class*="m-splide-pagination"] li {
display: flex;
place-items: center;
width: 1.125rem;
height: 1.125rem;
}

[class*="a-splide-pagination-link"] {
box-sizing: border-box;
display: grid;
place-items: center;
width: inherit;
height: inherit;
background-color: hsl(0deg 0% 100% / 95%);
border: 1px solid hsl(220deg 20% 85%);
border-radius: 50%;
cursor: pointer;
transition: var(--background-color-transition);
}

[class*="a-splide-pagination-link"]:before {
content: '';
display: block;
width: .5rem;
height: .5rem;
border-radius: inherit;
transition: var(--background-color-transition);
}

[class*="a-splide-pagination-link"]:before {
background-color: hsl(220deg 20% 75%);
}

[class*="a-splide-pagination-link"]:focus,
[class*="a-splide-pagination-link"]:focus:before {
background-color: var(--color-secondary-action);
}

@media (hover: hover) {

[class*="a-splide-pagination-link"]:hover,
[class*="a-splide-pagination-link"]:hover:before {
background-color: var(--color-secondary-action);
}

}

[class*="a-splide-pagination-link"][class*="is-active"],
[class*="a-splide-pagination-link"][class*="is-active"]:before {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
}

/* @end @m-splide-pagination */

/* padding-x layout for splidejs -------------------------------------------------------- */

/* @group @variables x-padding */

:root {
--splidejs-x-padding-base: var(--x-padding-base);
}

@media (width >= 62em) { /* 992px -> * */

:root {
--splidejs-x-padding-base: calc((100vw - 56rem) / 2);
}

}

:root {
--splidejs-x-padding-right: var(--splidejs-x-padding-base);
--splidejs-x-padding-left: var(--splidejs-x-padding-base);
}

@supports (padding-top: constant(safe-area-inset-top)) {

:root {
--splidejs-x-padding-right: calc(env(safe-area-inset-right) + var(--splidejs-x-padding));
--splidejs-x-padding-left: calc(env(safe-area-inset-left) + var(--splidejs-x-padding));
}

}

@media (width >= 62em) { /* 992px -> * */

:root {
--splidejs-x-padding-base: calc((100vw - 56rem) / 2);
}

}

/* @end @variables x-padding */