.block-banner-slider {
    padding: 0 !important;
}

.block-banner-slider .slider .next::after,
.block-banner-slider .slider .prev::after {
    height: 1.2em;
    width: 1.2em;
    border-width: .2em;
    transform: rotate(135deg) translate(-0.2em, 0.2em);
}

.block-banner-slider .slider .pagination {
    --ui-color: var(--dark);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    gap: max(1.5%, .5em);

    button {
        width: .7em;
        height: .7em;
    }
}

.block-banner-slider.bg-dark,
.block-banner-slider.bg-secondary {
    .slider .next::after,
    .slider .prev::after {
        border-color: var(--light);
    }
    .slider .pagination {
        --ui-color: var(--light);
    }
}

.block-banner-slider .slide {
    padding-block: calc(var(--gapy));
    padding-inline: 1em;
    overflow: hidden;
}

.block-banner-slider {
    .image-col.block-end:not(.order-first) img {
        margin-bottom: calc(var(--gapy) * -1);
    }
}

@media screen and (min-width: 52em) {
    .block-banner-slider {
        .image-col.block-end img {
            margin-bottom: calc(var(--gapy) * -1);
        }
    }
}

.block-banner-slider.block-inner-fade-in .image-col img {
    translate: 0 40px;
    scale: .9;
    opacity: 0;
    transition: scale 1.4s cubic-bezier(0, 1, 0, 1) .3s, opacity 1.9s cubic-bezier(0, 1, 0, 1) .3s, translate 1.4s cubic-bezier(0, 1, 0, 1) .3s;
}

.block-banner-slider .observed .showing .image-col img {
    scale: 1.001;
    opacity: 1;
    translate: 0 0;
}

.block-banner-slider.block-inner-fade-in .content-col h1 {
    translate: 0 100px;
    scale: .9;
    opacity: 0;
    transition: scale 1.4s cubic-bezier(0, 1, 0, 1), opacity 1.9s cubic-bezier(0, 1, 0, 1), translate 1.4s cubic-bezier(0, 1, 0, 1);
}

.block-banner-slider.block-inner-fade-in .content-col p {
    translate: 0 100px;
    scale: .9;
    opacity: 0;
    transition: scale 1.4s cubic-bezier(0, 1, 0, 1) .1s, opacity 1.9s cubic-bezier(0, 1, 0, 1) .1s, translate 1.4s cubic-bezier(0, 1, 0, 1) .1s;
}

.block-banner-slider.block-inner-fade-in .content-col .button {
    translate: 0 100px;
    scale: .9;
    opacity: 0;
    transition: scale 1.4s cubic-bezier(0, 1, 0, 1) .2s, opacity 1.9s cubic-bezier(0, 1, 0, 1) .2s, translate 1.4s cubic-bezier(0, 1, 0, 1) .2s;
}

.block-banner-slider .observed .showing .content-col h1,
.block-banner-slider .observed .showing .content-col .button,
.block-banner-slider .observed .showing .content-col p {
    scale: 1.001;
    opacity: 1;
    translate: 0 0;
}