/* ─────────── */
/*    slide    */
/* ─────────── */
/* MOBILE */
@media screen and (max-width: 639px) {
    .slide {
        position: relative;
        width: 100%;
        height: 260px;
        overflow: hidden;
    }
    .slide__elems {
        /* left: calc(-50px - (2510px / 2 - 50vw)); */
        left: calc(-20px - ((205px * 7) / 2 - 50vw));
    }
    .slide__elem {
        position: absolute;
        width: 200px;
    }
    @keyframes slide_ltr {
        to {
            left: calc(-20px - ((205px * 7) / 2 - 50vw) + 205px);
        }
    }
    @keyframes slide_rtl {
        to {
            left: calc(-20px - ((205px * 7) / 2 - 50vw) - 205px);
        }
    }
    #buttonRTL {
        width: 60px;
        height: 60px;
    }
    #buttonLTR {
        width: 60px;
        height: 60px;
    }
    .slide__fade--L {
        width: 50px;
        height: 100%;
        background: rgb(0, 0, 0);
        background: linear-gradient(-90deg, #00000000 0%, #5db6b3 90%);
    }
    .slide__fade--R {
        width: 50px;
        height: 100%;
        background: rgb(0, 0, 0);
        background: linear-gradient(90deg, #00000000 0%, #5db6b3 90%);
    }
}
/* TABLET */
@media screen and (min-width: 640px) and (max-width: 1279px) {
    .slide {
        position: relative;
        width: 100%;
        height: 450px;
        overflow: hidden;
    }
    .slide__elems {
        left: calc(-50px - (2510px / 2 - 50vw));
    }
    .slide__elem {
        position: absolute;
    }
    @keyframes slide_ltr {
        to {
            left: calc(-50px - (2510px / 2 - 50vw) + 360px);
        }
    }
    @keyframes slide_rtl {
        to {
            left: calc(-50px - (2510px / 2 - 50vw) - 360px);
        }
    }
    .slide__fade--L {
        width: 100px;
        height: 100%;
        background: rgb(0, 0, 0);
        background: linear-gradient(-90deg, #00000000 0%, #5db6b3 90%);
    }
    .slide__fade--R {
        width: 100px;
        height: 100%;
        background: rgb(0, 0, 0);
        background: linear-gradient(90deg, #00000000 0%, #5db6b3 90%);
    }
}
/* PC */
@media screen and (min-width: 1280px) {
    .slide {
        position: relative;
        width: 1280px;
        height: 450px;
        overflow: hidden;
    }
    .slide__elems {
        left: -620px;
    }
    .slide__elem {
        position: absolute;
    }
    @keyframes slide_ltr {
        to {
            left: -260px;
        }
    }
    @keyframes slide_rtl {
        to {
            left: -980px;
        }
    }
    .slide__fade--L {
        width: 100px;
        height: 100%;
        background: rgb(0, 0, 0);
        background: linear-gradient(-90deg, #00000000 0%, #5db6b3 90%);
    }
    .slide__fade--R {
        width: 100px;
        height: 100%;
        background: rgb(0, 0, 0);
        background: linear-gradient(90deg, #00000000 0%, #5db6b3 90%);
    }
}

.slide__fade {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}
.slide__controls {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 20px;
}
.slide__controls > img {
    width: 100px;
    height: 100px;
    cursor: pointer;
}
.slide__elems {
    position: absolute;
    width: 3000px;
    height: 500px;
}
.slide__elems:nth-child(3) {
    opacity: 0.1;
}

.slide__ltr {
    animation-duration: 1s;
    animation-name: slide_ltr;
}
.slide__rtl {
    animation-duration: 1s;
    animation-name: slide_rtl;
}
.slide__elem {
    position: absolute;
}