.si-before-after-slider,
.si-before-after-slider *,
.si-before-after-slider *::before,
.si-before-after-slider *::after {
    box-sizing: border-box;
}

.si-before-after-slider {

    --si-gap: 8px;
    --si-image-gap: 4px;
    --si-radius: 8px;
    --si-speed: 55s;

    position: relative;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


.si-ba-slider-track {

    display: flex;

    align-items: stretch;

    width: 200%;

    margin: 0;
    padding: 0;

    animation: siBeforeAfterScroll var(--si-speed) linear infinite;

    will-change: transform;

    transform: translate3d(0, 0, 0);
}

.si-ba-slider-group {

    flex: 0 0 50%;

    width: 50%;

    min-width: 50%;

    display: flex;

    align-items: stretch;

    gap: var(--si-gap);

    margin: 0;
    padding: 0 var(--si-gap) 0 0;

    box-sizing: border-box;
}

.si-before-after-card {

    flex: 0 0 calc(
        (100% - (var(--si-gap) * 4)) / 4
    );

    width: calc(
        (100% - (var(--si-gap) * 4)) / 4
    );

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: var(--si-image-gap);

    margin: 0;
    padding: 0;
}


.si-before-after-image {
    position: relative;
    width: 100%;
    /* aspect-ratio: 1.58 / 1; */
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--si-radius);
    background: #eeeeee;
}


.si-before-after-image img {

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit: cover;
    object-position: center;
}

.si-ba-label {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 8px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 4px;
	font-family: Montserrat;
}


/* BEFORE */

.si-ba-before {
	top: 7px;
	left: 7px;
	color: #ffffff;
	background: #288383;
}


/* AFTER */

.si-ba-after {

    right: 7px;
    bottom: 7px;

    color: #18aaa5;

    background: #ffffff;
}


@keyframes siBeforeAfterScroll {

    0% {

        transform: translate3d(
            0,
            0,
            0
        );

    }

    100% {

        transform: translate3d(
            -50%,
            0,
            0
        );

    }

}


@media (max-width: 1024px) {

    .si-before-after-slider {

        --si-gap: 6px;
        --si-image-gap: 3px;
        --si-radius: 7px;
        --si-speed: 48s;

    }


    .si-ba-label {

        padding: 4px 6px;

        font-size: 8px;

    }

}

@media (max-width: 767px) {

    .si-before-after-slider {

        --si-gap: 6px;
        --si-image-gap: 3px;
        --si-radius: 6px;
        --si-speed: 42s;

    }


    .si-ba-slider-track {

        width: 400%;

    }


    .si-ba-slider-group {

        flex: 0 0 50%;

        width: 50%;

        min-width: 50%;

    }


    .si-before-after-card {

        flex: 0 0 calc(
            (100% - (var(--si-gap) * 4)) / 4
        );

        width: calc(
            (100% - (var(--si-gap) * 4)) / 4
        );

    }


    .si-ba-label {

        padding: 4px 5px;

        font-size: 7px;

        border-radius: 3px;

    }


    .si-ba-before {

        top: 5px;
        left: 5px;

    }


    .si-ba-after {

        right: 5px;
        bottom: 5px;

    }

}