/*=========================================
            <= 1200px
=========================================*/

@media(max-width:1200px){

.container{
    width:95%;
}

.hero-grid{
    gap:40px;
}

.hero h1{
    font-size:55px;
}

.hero h2{
    font-size:60px;
}

.streamer-grid{
    grid-template-columns:repeat(3,1fr);
}

.clip-grid{
    grid-template-columns:repeat(2,1fr);
}

.stat-grid{
    grid-template-columns:repeat(3,1fr);
}

.bottom-grid{
    grid-template-columns:1fr;
}

.footer{
    grid-template-columns:repeat(2,1fr);
}

}


/*=========================================
            <= 992px
=========================================*/

@media(max-width:992px){

.menu{

    position:fixed;

    top:85px;
    left:-100%;

    width:280px;
    height:calc(100vh - 85px);

    background:#11111d;

    flex-direction:column;

    padding:40px;

    gap:30px;

    transition:.35s;

    border-right:1px solid rgba(255,255,255,.05);

}

.menu.active{

    left:0;

}

.mobile-toggle{

    display:flex;
    width:45px;
    height:45px;

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

    background:#1a1a28;

    border-radius:10px;

    cursor:pointer;

    font-size:20px;

}

.hero-grid{

    grid-template-columns:1fr;

}

.hero-left{

    text-align:center;

}

.hero p{

    margin:auto;
    margin-top:30px;
    margin-bottom:35px;

}

.buttons{

    justify-content:center;

}

.socials{

    justify-content:center;

}

.hero-right{

    margin-top:60px;

}

.clip-grid{

    grid-template-columns:repeat(2,1fr);

}

.streamer-grid{

    grid-template-columns:repeat(2,1fr);

}

.stat-grid{

    grid-template-columns:repeat(2,1fr);

}

.game-list{

    grid-template-columns:repeat(2,1fr);

}

.footer{

    grid-template-columns:1fr;

}

}


/*=========================================
            <= 768px
=========================================*/

@media(max-width:768px){

.nav{

    height:75px;

}

.logo span{

    font-size:22px;

}

.right button{

    display:none;

}

.hero{

    padding:60px 0;

}

.hero h1{

    font-size:42px;

}

.hero h2{

    font-size:48px;

}

.section-title{

    flex-direction:column;
    align-items:flex-start;
    gap:15px;

}

.clip-grid{

    grid-template-columns:1fr;

}

.streamer-grid{

    grid-template-columns:1fr;

}

.stat-grid{

    grid-template-columns:1fr;

}

.game-list{

    grid-template-columns:1fr 1fr;

}

.game-list img{

    height:180px;

}

.footer form{

    flex-direction:column;

}

.footer button{

    height:50px;

}

}


/*=========================================
            <= 576px
=========================================*/

@media(max-width:576px){

.container{

    width:92%;

}

.hero h1{

    font-size:32px;

}

.hero h2{

    font-size:38px;

}

.hero p{

    font-size:15px;

}

.buttons{

    flex-direction:column;

}

.btn{

    width:100%;
    text-align:center;

}

.socials{

    flex-wrap:wrap;

}

.socials i{

    width:42px;
    height:42px;

}

.live-card img{

    height:260px;

}

.section-title h2{

    font-size:26px;

}

.game-list{

    grid-template-columns:1fr;

}

.footer{

    text-align:center;

}

.footer a{

    padding:0;

}

.footer a:hover{

    padding:0;

}

.footer form{

    margin-top:15px;

}

}


/*=========================================
            <= 400px
=========================================*/

@media(max-width:400px){

.hero h1{

    font-size:28px;

}

.hero h2{

    font-size:30px;

}

.logo span{

    font-size:18px;

}

.live-card img{

    height:220px;

}

.stat h2{

    font-size:32px;

}

}