@layer external{ @keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}} @layer master { .splide { position: relative; grid-column: span 12; max-width: calc(100vw - var(--spacer) - var(--spacer)); &:not(.is-overflow) { .splide__arrow { display: none; } } .splide__pagination { padding: 0; margin-top: calc(var(--padding) / 2); margin-bottom: 0; gap: 8px; li { .splide__pagination__page { position: relative; display: block; border-radius: 6px; width: 6px; height: 6px; transform: none; padding: 0; margin: 0; background: var(--color3); opacity: 0.15; transition: var(--transition); &.is-active { width: 48px; opacity: 1; z-index: 1; } &:hover { background: var(--color3); cursor: pointer; opacity: 0.9; } } } } .splide__arrow { cursor: pointer; padding: 0; background: transparent; border: 0; border-radius: 50%; background-color: var(--color2); display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); transition: var(--transition); &:hover:not(:disabled) { @media (hover: hover) { background-color: var(--color3); color: var(--color-light); } } &:disabled { opacity: 0.3; } &.splide__arrow--prev { left: var(--gutter); } &.splide__arrow--next { right: var(--gutter); } } } }