/* ==========================================================
   3 Patti All Games
   Responsive Stylesheet
========================================================== */


/* ==========================================================
   TABLET VIEW 768px+
========================================================== */

@media (min-width:768px){


    .container{

        width:92%;

    }


    .games-grid{

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

        gap:25px;

    }


    .updates-grid{

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

    }


    .screenshot-grid{

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

    }


}



/* ==========================================================
   LAPTOP VIEW 992px+
========================================================== */

@media (min-width:992px){


    .container{

        max-width:1100px;

        margin:auto;

    }


    .games-grid{

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

        gap:25px;

    }


    .updates-grid{

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

    }


    .featured-card{

        flex-wrap:nowrap;

    }


    .screenshot-grid{

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

    }


}



/* ==========================================================
   DESKTOP VIEW 1200px+
========================================================== */

@media (min-width:1200px){


    .container{

        max-width:1200px;

    }


    .games-grid{

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

        gap:25px;

    }


}



/* ==========================================================
   MOBILE VIEW 768px-
========================================================== */

@media (max-width:768px){



    /* Header */

    .site-header .container{

        min-height:65px;

    }


    .menu-toggle{

        display:block;

    }



    .main-nav{

        display:none;

        position:absolute;

        top:65px;

        left:0;

        width:100%;

        background:#ffffff;

        box-shadow:0 5px 15px rgba(0,0,0,.10);

    }



    .main-nav.active{

        display:block;

    }



    .main-nav ul{

        flex-direction:column;

        gap:0;

        padding:15px 0;

    }



    .main-nav li{

        width:100%;

        text-align:center;

    }



    .main-nav a{

        padding:12px 0;

    }



    /* Hero */

    .hero{

        padding:50px 0;

    }



    .hero h1{

        font-size:28px;

    }



    .hero p{

        font-size:15px;

    }



    /* Games Mobile */

    .games-grid{

        grid-template-columns:1fr;

        gap:20px;

    }



    .game-card{

        padding:18px;

    }



    /* Article */

    .article-content p{

        text-align:left;

    }



    /* Table */

    .table-responsive{

        overflow-x:auto;

        width:100%;

    }



    table{

        min-width:600px;

    }


}



/* ==========================================================
   SMALL MOBILE 480px-
========================================================== */

@media (max-width:480px){


    .site-logo{

        font-size:20px;

    }



    .hero h1{

        font-size:24px;

    }



    .download-btn{

        width:100%;

        text-align:center;

    }


}