.slider-container {
    background: #FA3C5A;
    padding-top: 10px;
    box-shadow:0 10px 30px rgba(0,0,0,.16);
    border-radius: 8px;
}
.main-slide {
    position:relative;
    height:450px;
    margin: 0 8px;
    overflow:hidden;
    border-radius: 8px;
}
.main-slide .layer {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    height:100%;
    width:auto;
    max-width:100%;
    object-fit:contain;
    display:block;
    opacity:0;
    transition:opacity .45s ease;
    will-change:opacity;
    border-radius: 8px;
}
.main-slide .layer.active {
    opacity:1;
}
.arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:32px;
    color:#fff;
    /*width:46px;*/
    /*height:46px;*/
    display:grid;
    place-items:center;
    border-radius:50%;
    cursor:pointer;
    user-select:none;
    z-index:5;
}
.arrow.left {
    left:10px;
}
.arrow.right {
    right:10px;
}
.thumbnails {
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    padding:10px;
    overflow-x:auto;
    border-radius: 8px;
    scrollbar-color: #fff transparent;
    scrollbar-width: thin;
}
.thumbnails img {
    height:70px;
    flex:0 0 auto;
    cursor:pointer;
    opacity:.55;
    border:2px solid transparent;
    transition:opacity .2s,border-color .2s;
    border-radius: 8px;
}
.thumbnails img:hover {
    opacity:1;
}
.thumbnails img.active {
    opacity:1;
    border-color:#fff;
}
@media (max-width: 420px) {
    .main-slide .layer {
        height:auto;
        width:100%;
    }
}