@media (max-width:992px){
    .recommendation-header{
        height:420px;
    }

    .hero-content{
        right:6%;
    }

    .hero-content h1{
        font-size:52px;
    }

    .hero-content p{
        width:430px;
        font-size:18px;
        line-height:32px;
    }

    .recommendation-section{
        width:100%;
        max-width:100%;
        padding:60px 20px;
    }

    .section-title h2{
        font-size:30px;
    }

    .movie-grid{
        justify-content:center;
        gap:22px;
    }

    .movie-card{
        width:300px;
    }

}

@media (max-width:768px){

    .recommendation-header{
        height:360px;
        background-position:center;
    }

    .hero-content{
        width:90%;
        right:50%;
        transform:translate(50%,-50%);
        text-align:center;
    }

    .hero-content h1{
        font-size:40px;
        margin-bottom:15px;
    }

    .hero-content p{
        width:100%;
        font-size:16px;
        line-height:30px;
        margin-bottom:25px;
    }

    .hero-content a{
        display:block;
        width:220px;
        margin:auto;
        padding:14px;
        font-size:15px;
    }

    .recommendation-section{
        width:100%;
        max-width:100%;
        padding:45px 15px;
    }

    .section-title{
        text-align:center;
        margin-bottom:35px;
    }

    .section-title h2{
        font-size:28px;
    }

    .section-title h2::after{
        right:50%;
        transform:translateX(50%);
    }

    .movie-grid{
        justify-content:center;
        gap:20px;
    }

    .movie-card{
    position:relative;
    width:280px;
    background:#181818;
    border-radius:16px;
    overflow:hidden;
    transition:.3s;
    flex-shrink:0;
    }

    .poster{
        height:420px;
    }

    .movie-info{
        padding:20px;
    }

    .movie-info h3{
        text-align:center;
        font-size:22px;
    }

    .movie-meta{
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
    }

    .movie-meta div{
        font-size:13px;
    }

    .movie-stats{
        flex-wrap:wrap;
        gap:10px;
    }

    .stat{
        min-width:48%;
        font-size:14px;
        padding:10px;
    }

    .movie-info p{
        height:auto;
        font-size:15px;
        line-height:28px;
    }

    .movie-footer{
        flex-direction:column;
        gap:15px;
    }

    .movie-footer span{
        font-size:14px;
    }

    .movie-footer a{
        width:100%;
        text-align:center;
        padding:12px;
    }
    .movie-card::before{
        position: relative;
    }
}

@media (max-width:576px){
    .movie-card::before{
        position: relative;
    }

    .recommendation-header{
        height:300px;
    }

    .hero-content{
        width:92%;
    }

    .hero-content h1{
        font-size:30px;
    }

    .hero-content p{
        font-size:14px;
        line-height:25px;
    }

    .hero-content a{
        width:100%;
        padding:13px;
    }

    .recommendation-section{
        width:100%;
        max-width:100%;
        padding:35px 12px;
    }

    .section-title h2{
        font-size:24px;
    }

    .movie-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    }

    .movie-card{
        position:relative;
        width:100%;
        max-width:360px;
    }

    .poster{
        height:340px;
    }

    .movie-info{
        padding:18px;
    }

    .movie-info h3{
        font-size:20px;
    }

    .movie-meta{
        flex-direction:column;
        gap:8px;
    }

    .movie-meta div{
        width:100%;
        text-align:center;
    }

    .movie-stats{
        flex-wrap:wrap;
        gap:8px;
    }

    .stat{
        width:48%;
        min-width:48%;
    }

    .movie-footer{
        gap:12px;
    }

    .movie-footer span{
        text-align:center;
    }

    .movie-footer a{
        width:100%;
        font-size:14px;
        padding:12px;
    }
}