/* Slider CSS */

.slider {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    overflow: hidden;

    .slider-container {
        display: flex;
        transition: transform 1s ease-in-out;
    }

    .slide {
        min-width: 100%;
        transition: opacity 0.5s ease-in-out;
        height: 16.25rem;
        position: relative;
        overflow: hidden;
    }

    .slider-slide-image {
        width: 100%;
        object-fit: cover; 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
    }

    .slide.active {
        display: block;
    }
    .slide.second-slide {
        display: none;
    }

    .nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        user-select: none;
        width: 40px;
        height: 40px;
    }

    .left {
        left: 0;
        background-image: url("../../assets/svg/chevron-backward.svg");
        background-size: 40px 40px;
    }

    .right {
        right: 0;
        background-image: url("../../assets/svg/chevron-forward.svg");
        background-size: 40px 40px;
    }
}

@media screen and (min-width: 1000px) {
    .slider {

        .slide {
            height: 33.625rem;
        }

        .nav {
            width: 64px;
            height: 64px;
        }

        .left {
            background-size: 64px 64px;
        }

        .right {
            background-size: 64px 64px;
        }
    }
}