header {
    width:100%;height:95%;display:block;
    position:relative;
}

.featured-pack {
    position:absolute;top:0;left:0;width:100%;
    height:100%;display:none;
}
.banner-wrap {
    width:100%;height:100%;object-fit: cover;
    object-position: center;z-index:1;
}
.featured-pack::before {
    position:absolute;top:0;left:0;content:"";
    width:100%;height:200%;z-index:2;transition: all 0.3s ease-in-out;
    background: linear-gradient(to bottom, rgba(25, 30, 36,0.5) 10%, rgba(25, 30, 36,1) 50%, rgba(25, 30, 36,1) 100%);
}
.featured-pack-transition::before {top: -100%;z-index:9;}

.currently-shown {display: block;}
.pack-info {
    position:absolute;top:50%;z-index:3;
    left: 5%;transform: translateY(-50%);
}
.pack-info .desc {
    max-width: 55vw;line-height:1.3;display:block;position:relative;
    min-height:8vh;max-height:15vh;margin: 2vh 0;
    -webkit-mask-image: linear-gradient(180deg, #ffffff 20%, transparent);
}


.next-btn {
    position: absolute;top:50%;right: 5%;
    transform: translateY(-50%);z-index:9;
    text-align: center;
}
.next-arrow {height: 10vh;margin-bottom: 1vh;}
.next-btn:hover {transform: scale(1.1) translateY(-50%);}

.swap-slide-effect {
    position:absolute;top:0;left:0;width:100%;height:100%;
    z-index:10;background-color: var(--c-blue);
}
.swap-slide-effect img {
    position:absolute;top:calc(50% - 10vh);
    left:calc(50% - 10vh);height: 20vh;
}

section {z-index:10;}

.shows-actions {
    display:flex;width:100%;position:relative;
    align-items: center;
}
.shows-buttons {margin-left:2vw;}
.swap-trending {
    background-color: var(--c-gray);
    padding: 1vh 2vh 1.1vh 2vh;margin-right: 1vw;
}
.active-trending::before {
    position:absolute;bottom:-1px;left:30%;width:40%;
    height:2px;background-color: var(--c-white);
    content:"";
}


.trend-grid {grid-template-columns: repeat(4, 1fr);gap:4vh;}


.explanation-grid {
    grid-template-columns: 60% 35%;gap: 5%;
}
.explanation-grid .download-section {margin: 0 !important;}
.video-box {display:block;width:100%;}
.video-box img {width:100%;display:block;}
.video-box iframe {
    position:absolute;top:0;left:0;width:100%;height:100%;
}


.arrow-wrap-ev {position:unset;}
@media (max-width: 980px) {
    .trend-grid {grid-template-columns: 100%;gap:4vh;}
    header {height: 40vh;}
    .pack-tags-list {display: none;}
    .pack-info .desc {
        max-width: 80vw;min-height:8vh;max-height:8vh;margin: 2vh 0;
        -webkit-mask-image: linear-gradient(180deg, #ffffff 20%, transparent);
    }
    header .next-btn {display: none;}

    #categories {margin-top: 0;}
    #categories .four-grid {gap: 1vh;}
    .secondary-category {margin-top: 1vh;}
    .secondary-category .four-grid {grid-template-columns: repeat(2, 1fr);}

    .arrow-wrap-ev {
        display:flex;gap:1vh;margin-top:2vh;
    }
    .arrow-cover {
        position:relative;width:50%;transform: none;top: auto;
        left: auto !important;right: auto !important;border-radius:0;
        text-align:center;
    }
    #download-explanation {display:none;}

    .extra-grid {grid-template-columns: 100%;gap: 1vh;}
}
@media (max-width: 1400px) and (min-width: 981px) {
    .trend-grid {grid-template-columns: repeat(2, 1fr);gap:4vh;}
}