/*
==========================================================
    IMPACTA GAMES
    RESPONSIVE
==========================================================

CONTENIDO

1. Desktop Large (1600px)
2. Desktop (1400px)
3. Laptop (1200px)
4. Tablet (992px)
5. Mobile (768px)
6. Small Mobile (576px)
7. Extra Small (420px)

Este archivo únicamente contiene reglas
globales del framework.

NO colocar aquí estilos específicos
de componentes.

Los componentes deben contener sus
propias media queries.
==========================================================
*/


/*==========================================================
    DESKTOP LARGE
    <= 1600px
==========================================================*/

@media (max-width:1600px){

    html{

        font-size:15px;

    }

}


/*==========================================================
    DESKTOP
    <= 1400px
==========================================================*/

@media (max-width:1400px){

    .container{

        max-width:1200px;

    }

}


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

@media (max-width:1200px){

    html{

        font-size:15px;

    }

    .container{

        max-width:100%;

        padding-inline:32px;

    }

}


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

@media (max-width:992px){

    html{

        font-size:15px;

    }

    body{

        overflow-x:hidden;

    }

    .container{

        padding-inline:24px;

    }

}


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

@media (max-width:768px){

    html{

        font-size:14px;

    }

    body{

        overflow-x:hidden;

    }

    .container{

        padding-inline:20px;

    }

}


/*==========================================================
    SMALL MOBILE
    <= 576px
==========================================================*/

@media (max-width:576px){

    html{

        font-size:13px;

    }

    .container{

        padding-inline:16px;

    }

}


/*==========================================================
    EXTRA SMALL
    <= 420px
==========================================================*/

@media (max-width:420px){

    html{

        font-size:12px;

    }

    .container{

        padding-inline:14px;

    }

}