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

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

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

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

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

[class*="m-hero-slider"] {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto 1.5rem;
}

[class*="splide__track"] {
grid-column: 1;
grid-row: 1 / span 3;
}


[class*="m-splide-pagination"] {
position: relative;
z-index: 3;
grid-column: 1;
grid-row: 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-position: relative;
--splide-slide-z-index: 0;
--splide-slide-opacity: 0;
}

[class*="splide--fade"] [class*="splide__slide"][class*="is-active"] {
/*--splide-slide-position: relative;*/
--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;
}

/* @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: var(--transition);
}

/* @end @splide--fade */

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

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

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

[class*="m-splide-pagination"] li {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 2.25rem;
}

[class*="a-splide-pagination-link"] {
display: grid;
align-items: center;
width: inherit;
height: inherit;
cursor: pointer;
transition: var(--transition);
}

[class*="a-splide-pagination-link"]:before {
content: '';
display: block;
width: 100%;
height: .375rem;
border-radius: 4.5rem;
transition: inherit;
}

[class*="a-splide-pagination-link"]:before {
background-color: hsla(0, 0%, 100%, .5);
}

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

}

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

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

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

/* @group @variables x-padding */

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

@media all and (min-width: 62em) {

: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 all and (min-width: 62em) {

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

}

/* @end @variables x-padding */