#slider_container {
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    width: var(--desk-width);
    height: 50vh;
    max-height: 700px;
    user-select: none;
    background-color: transparent;
}
#slider_container #slider .slide { position: absolute; width: 100%; height: 100%; overflow: hidden; opacity: 0; transition: all 1s; }
#slider_container #slider img { width: inherit; height: inherit; object-fit: contain; }

/* #slider_container button { cursor: pointer; background-color: #00000030; color: #FFFFFF30; border: none; font-size: 4rem; transition: all 1s; }
#slider_container button:hover {background-color: #000000A0; color: #FFFFFFFF;} */

#slider_container button#prev-btn, #slider_container button#next-btn { cursor: pointer; background-color: transparent; color: #AAAAAAA0; border: none; font-size: 4rem; transition: all 1s; }
#slider_container button#prev-btn:hover, #slider_container button#next-btn:hover {background-color: transparent; color: #FFFFFFFF;}

#slider_container button#play-btn { cursor: pointer; background-color: transparent; color: #AAAAAA00; border: none; font-size: 4rem; transition: all 1s; }
#slider_container button#play-btn:hover {background-color: transparent; color: #FFFFFFFF;}

#slider_container button#prev-btn { position: absolute; bottom: 0; top: 0; left: 0; width: 15%; max-width: 200px; }
#slider_container button#next-btn { position: absolute; bottom: 0; top: 0; right: 0; width: 15%; max-width: 200px; }
#slider_container button#play-btn { position: absolute; bottom: 0; top: 0; left: 15%; right: 15%; max-width: 70%; background: none; }

@media only screen and (max-width: 767px)
{
    #slider_container { width: var(--mobile-width); margin-top: 20px; }
}