@use "../abstracts/mixins";
@use "../abstracts/variables";

.slideshow{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
    z-index: 0;

    &_item{
        position: absolute;
        width: 45vw;
        top: 101vh;
        overflow: hidden;
        will-change: transform;

        @include mixins.respondTo('xs'){
            width: 80vw;
        }

        &_cover{
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            will-change: transform;
        }

        &::before{
            content: "";
            display: block;
            padding-top: 67%;
        }

        &::after{
            content: "";
            position: absolute;
            z-index: 1;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: variables.$cLight;
            opacity: 0.2;
        }

        &:nth-child(even){
            width: 30vw;

            @include mixins.respondTo('xs'){
                width: 65vw;
            }

            &::before{
                padding-top: 115%;
            }
        }
    }
}