#banner {
    position:relative;
    height:80vh;
    overflow:hidden;
    outline:none;
}

/* Slides */
.slide {
    position:absolute;
    width:100%; height:100%;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity .8s;
}

.slide.active { opacity:1; }

/* Content */
.content {
    position:absolute;
    top:40%;
    left:20%;
    color:#fff;
}

.slide .content > * { opacity:0; }

/* ENTER */
.slide.active h2 {
    animation:slideInLeft .8s forwards;
}

.slide.active a {
    animation:fadeIn 1s forwards .3s;
}
.slide a {
    background-color: rgba(205, 19, 22, 0.75);
    cursor: pointer;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    height: auto;
    width: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    line-height: 14px;
    font-weight: 500;
    font-size: 20px;
    padding: 15px 40px;
    border-radius: 30px;
    backdrop-filter: none;
    filter: none;
    transform-origin: 124.442px 25px 0px;
}

/* EXIT */
.slide.exit h2 {
    animation:slideDownExit .6s forwards;
}

/* Animations */
@keyframes slideInLeft {
    from { opacity:0; transform:translateX(-60px); }
    to { opacity:1; transform:translateX(0); }
}

@keyframes fadeIn {
    to { opacity:1; }
}

@keyframes slideDownExit {
    to { opacity:0; transform:translateY(20px); }
}

/* Progress Bar */
.progress {
    position:absolute;
    bottom:0;
    left:0;
    height:4px;
    width:0%;
    background:#fff;
}

/* Navigation Buttons */
.nav-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.5);
    color:#fff;
    border:none;
    font-size:2rem;
    padding:10px;
    cursor:pointer;
    z-index:2;
}

#prev { left:10px; }
#next { right:10px; }

/* Preview on hover */
.preview {
    position:absolute;
    width:80px;
    height:50px;
    object-fit:cover;
    top:50%;
    transform:translateY(-50%);
    opacity:0;
    transition:.3s;
}

.nav-btn:hover .preview { opacity:1; }

.prev-preview { left:100%; margin-left:10px; }
.next-preview { right:100%; margin-right:10px; }

/* Thumbnails */
.thumbnails {
    position:absolute;
    bottom:10px;
    width:100%;
    display:flex;
    justify-content:center;
    gap:10px;
    z-index:3;
}

.thumbnails img {
    width:80px;
    height:50px;
    object-fit:cover;
    opacity:.6;
    cursor:pointer;
    border:2px solid transparent;
    transition:.3s;
}

.thumbnails img.active {
    opacity:1;
    border-color:#fff;
}

/* Mobile */
@media (max-width:768px){
    #banner { height:60vh; }
    .content h2 { font-size:1.5rem; }
    .thumbnails img { width:60px; height:40px; }
}

.progress{position:absolute;bottom:0;left:0;height:4px;width:0;background:#fff}