/*==================================================
  GRID SYSTEM
  Proyecto: QPERTINO
==================================================*/

/*=====================================
CONTENEDOR PRINCIPAL
=====================================*/

.container{

    width:min(92%,1400px);

    margin-inline:auto;

    padding-inline:15px;

}

/*=====================================
SECCIONES
=====================================*/

section{

    position:relative;

    padding:120px 0;

}

.section-sm{

    padding:80px 0;

}

.section-lg{

    padding:160px 0;

}

.section-dark{

    background:var(--bg-section);

    color:var(--heading);

}

.section-light{

    background:#F8FAFC;

}

.section-white{

    background:#FFFFFF;

}

/*=====================================
GRID 2 COLUMNAS
=====================================*/

.grid-2{

    display:grid;

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

    gap:70px;

    align-items:center;

}

/*=====================================
GRID 3 COLUMNAS
=====================================*/

.grid-3{

    display:grid;

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

    gap:40px;

}

/*=====================================
GRID 4 COLUMNAS
=====================================*/

.grid-4{

    display:grid;

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

    gap:35px;

}

/*=====================================
AUTO GRID
=====================================*/

.auto-grid{

    display:grid;

    grid-template-columns:

    repeat(

        auto-fit,

        minmax(300px,1fr)

    );

    gap:35px;

}

/*=====================================
FLEX
=====================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/*=====================================
ESPACIADOS
=====================================*/

.mt-1{

    margin-top:20px;

}

.mt-2{

    margin-top:40px;

}

.mt-3{

    margin-top:60px;

}

.mt-4{

    margin-top:90px;

}

.mb-1{

    margin-bottom:20px;

}

.mb-2{

    margin-bottom:40px;

}

.mb-3{

    margin-bottom:60px;

}

.mb-4{

    margin-bottom:90px;

}

/*=====================================
ANCHOS
=====================================*/

.w-25{

    width:25%;

}

.w-50{

    width:50%;

}

.w-75{

    width:75%;

}

.w-100{

    width:100%;

}

/*=====================================
ALINEACIÓN
=====================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:1200px){

.grid-4{

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

}

}

@media(max-width:992px){

section{

padding:90px 0;

}

.grid-2{

grid-template-columns:1fr;

gap:50px;

}

.grid-3{

grid-template-columns:1fr;

}

.grid-4{

grid-template-columns:1fr;

}

.flex-between{

flex-direction:column;

gap:25px;

}

}

@media(max-width:768px){

.container{

width:94%;

padding-inline:10px;

}

section{

padding:70px 0;

}

.section-lg{

padding:110px 0;

}

.section-sm{

padding:60px 0;

}

.auto-grid{

grid-template-columns:1fr;

}

}