@media (max-width: 1140px){
    .main-title{
        text-align: center;
        height: 100%;
    }
    .series-coll{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .header-nav-list{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        right: 0;
        top: 0;
        background: #00000099;
        height: 100vh;
        width: 150px;
        backdrop-filter: blur(4px);
        transform: translateX(100%);
        transition: 0.3s;
    }
    .burger{
        display: block;
    }
    .burger:hover ~ .header-nav-list{
        transform: translateX(0);
    }
    .header-nav-list a::after{
        display: none;
    }
    .header-nav-list a:hover{
        padding: 0;
    }
    .header-nav-list a{
        padding: 0;
    }
    .header-content .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .header-content h1{
        font-size: calc(2vh + 2vw + 4vmin);
    }
    .trailer{
        background: linear-gradient(90deg, #DEF7FF 0%, #F4FCFF 15.64%, rgba(255, 255, 255, 0) 100.72%);
    }
}
@media (max-width: 578px) {
    .series-coll-card:first-child{
        grid-row: 1 span;
    }
    .series-coll-card:last-child{
        font-size: 20px;
    }
}
@media (max-width: 400px) {
    .btn{
        padding: 11px 28px;
    }
}
@media (max-width: 476px) {
    .trailer img{
        width: 100%;
    }
}