@import "current.css";
@import "previous.css";
@import "next.css";

.triple-state-slider {
    width: 100%;
    height: 60vh;
    position: relative;
    overflow: hidden;
    direction: ltr;
    margin-top: 1em ;
}

.triple-state-slider .previous-slide-wrapper, .triple-state-slider .next-slide-wrapper {
    position: absolute;
    top:0;
    bottom: 0;
    left: 10%;
    right: 10%;
    transform: scaleY(.8);
}
.triple-state-slider .previous-slide-wrapper {
    transform: translateX(calc(-100% - 1em)) scaleY(.8);
}
.triple-state-slider .next-slide-wrapper {
    transform: translateX(calc(100% + 1em)) scaleY(.8) ;
}
.triple-state-slider .previous-slide-wrapper img, .triple-state-slider .next-slide-wrapper img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.triple-state-slider .current-slide-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10%;
    right: 10%;
    overflow: hidden;
}
.triple-state-slider .current-slide-wrapper img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}