.hg-wrapper{
    position:relative;
    width:100%;
    margin-bottom:120px;
}

.hg-slider{
    position:relative;
    width:100%;
    height:720px;
    overflow:hidden;
    border-radius:24px;
    background:#000;
}

.hg-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .55s ease;
    z-index:1;
}

.hg-slide.active{
    opacity:1;
    visibility:visible;
    z-index:2;
}

.hg-slide-bg{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    z-index:1;
}

.hg-overlay{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
}

.hg-title-wrap{
    position:absolute;
    inset:0;
    z-index:10;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;
    pointer-events:none;

    padding:40px;
}

.hg-title{
    margin:0;
    text-transform:uppercase;
    line-height:1;

    text-shadow:0 4px 20px rgba(0,0,0,.45);
}

.hg-thumbnails{
    position:relative;
    z-index:20;

    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;

    justify-content:center;
    align-items:center;

    gap:20px;

    width:100%;
    max-width:100%;

    padding:0 40px;

    margin-top:-70px;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;
}

.hg-thumbnails::-webkit-scrollbar{
    display:none;
}

.hg-thumb{
    flex:0 0 260px;

    height:130px;

    padding:0;

    border:3px solid transparent;
    border-radius:22px;

    overflow:hidden;

    background:#000;

    cursor:pointer;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

    opacity:.85;

    transition:
        transform .25s ease,
        border-color .25s ease,
        opacity .25s ease;
}

.hg-thumb:hover{
    opacity:1;
    transform:translateY(-4px);
}

.hg-thumb.active{
    opacity:1;
    border-color:#fff;
    transform:translateY(-6px);
}

.hg-thumb img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center center;
}

@media(max-width:1024px){

    .hg-wrapper{
        margin-bottom:100px;
    }

    .hg-slider{
        height:600px;
    }

    .hg-thumbnails{
        justify-content:flex-start;

        padding:0 24px;

        gap:15px;

        margin-top:-60px;
    }

    .hg-thumb{
        flex:0 0 210px;
        height:115px;
    }
}

@media(max-width:767px){

    .hg-wrapper{
        margin-bottom:80px;
    }

    .hg-slider{
        height:450px;
        border-radius:16px;
    }

    .hg-title-wrap{
        padding:20px;
    }

    .hg-thumbnails{
        justify-content:flex-start;

        padding:0 16px;

        gap:10px;

        margin-top:-45px;
    }

    .hg-thumb{
        flex:0 0 140px;
        height:90px;

        border-radius:14px;
    }
}