/**
    * Estos son los breakpoints que se deben usar:
    * xs: max-width: 575px
    * sm: max-width: 767px
    * md: max-width: 991px
    * lg: max-width: 1200px
    * xl: max-width: 1400px
**/



/*------------------------------------
   ?TABLE OF CONTENTS
------------------------------------*/
/**
   * ?TABLE OF CONTENTS........... Lo estás leyendo!!
   * ?GRID........... Estilos del grid de maquetación.
   * ?UTILITIES........... Utilidades.
**/






/*------------------------------------
   ?GRID
------------------------------------*/

.grid {
    display: grid;
    gap: 30px;
    margin-bottom: 30px;
}

@media (max-width: 575px) {
    .grid {
        gap: 20px;
        margin-bottom: 20px;
    }
}

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

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

.col6040 {
    grid-template-columns: 60% 1fr;
}

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

@media (max-width: 1400px) {
    .col1--xl {
        grid-template-columns: 1fr;
    }

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

    .col6040--xl {
        grid-template-columns: 60% 1fr;
    }

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

@media (max-width: 1200px) {
    .col1--lg {
        grid-template-columns: 1fr;
    }

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

    .col6040--lg {
        grid-template-columns: 60% 1fr;
    }

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

@media (max-width: 991px) {
    .col1--md {
        grid-template-columns: 1fr;
    }

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

    .col6040--md {
        grid-template-columns: 60% 1fr;
    }

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

@media (max-width: 767px) {
    .col1--sm {
        grid-template-columns: 1fr;
    }

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

    .col6040--sm {
        grid-template-columns: 60% 1fr;
    }

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

@media (max-width: 575px) {
    .col1--xs {
        grid-template-columns: 1fr;
    }

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

    .col6040--xs {
        grid-template-columns: 60% 1fr;
    }

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






/*------------------------------------
   ?UTILITIES
------------------------------------*/

/*-- COLORS --*/

.primary {
    color: var(--primary) !important;
}

.secondary {
    color: var(--secondary) !important;
}





/*-- BACKGORUNDS --*/

.bg--veryLightGray {
    background-color: var(--gray-96) !important;
}

.bg--lightGray {
    background-color: var(--gray-90) !important;
}





/*-- FLEX --*/

.d--none {
    display: none !important;
}

.d--block {
    display: block !important;
}

.d--inlineBlock {
    display: inline-block !important;
}

.d--inlineFlex {
    display: inline-flex !important;
}

.d--flex {
    display: flex !important;
}

.aligItems--center {
    align-items: center !important;
}

.justifyContent--end {
    justify-content: end !important;
}





/*-- TEXT & FONT --*/

.textAlign--center {
    text-align: center !important;
}

.bold {
    font-weight: bold !important;
}




/*-- LIST --*/

.list--unstyled {
    list-style: none;
    padding-left: 0;
}






/*-- MARGIN --*/

.mx--auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.m--0,
.my--0,
.mt--0 {
    margin-top: 0 !important;
}

.m--0,
.my--0,
.mb--0 {
    margin-bottom: 0 !important;
}

.m--0,
.mx--0,
.mr--0 {
    margin-right: 0 !important;
}

.m--0,
.mx--0,
.ml--0 {
    margin-left: 0 !important;
}

.m--5,
.my--5,
.mt--5 {
    margin-top: 5px !important;
}

.m--5,
.my--5,
.mb--5 {
    margin-bottom: 5px !important;
}

.m--5,
.mx--5,
.mr--5 {
    margin-right: 5px !important;
}

.m--5,
.mx--5,
.ml--5 {
    margin-left: 5px !important;
}

.m--10,
.my--10,
.mt--10 {
    margin-top: 10px !important;
}

.m--10,
.my--10,
.mb--10 {
    margin-bottom: 10px !important;
}

.m--10,
.mx--10,
.mr--10 {
    margin-right: 10px !important;
}

.m--10,
.mx--10,
.ml--10 {
    margin-left: 10px !important;
}

.m--20,
.my--20,
.mt--20 {
    margin-top: 20px !important;
}

.m--20,
.my--20,
.mb--20 {
    margin-bottom: 20px !important;
}

.m--20,
.mx--20,
.mr--20 {
    margin-right: 20px !important;
}

.m--20,
.mx--20,
.ml--20 {
    margin-left: 20px !important;
}

.m--30,
.my--30,
.mt--30 {
    margin-top: 30px !important;
}

.m--30,
.my--30,
.mb--30 {
    margin-bottom: 30px !important;
}

.m--30,
.mx--30,
.mr--30 {
    margin-right: 30px !important;
}

.m--30,
.mx--30,
.ml--30 {
    margin-left: 30px !important;
}






/*-- PADDING --*/

.p--5,
.py--5,
.pt--5 {
    padding-top: 5px !important;
}

.p--5,
.py--5,
.pb--5 {
    padding-bottom: 5px !important;
}

.p--5,
.px--5,
.pr--5 {
    padding-right: 5px !important;
}

.p--5,
.px--5,
.pl--5 {
    padding-left: 5px !important;
}

.p--10,
.py--10,
.pt--10 {
    padding-top: 10px !important;
}

.p--10,
.py--10,
.pb--10 {
    padding-bottom: 10px !important;
}

.p--10,
.px--10,
.pr--10 {
    padding-right: 10px !important;
}

.p--10,
.px--10,
.pl--10 {
    padding-left: 10px !important;
}

.p--20,
.py--20,
.pt--20 {
    padding-top: 20px !important;
}

.p--20,
.py--20,
.pb--20 {
    padding-bottom: 20px !important;
}

.p--20,
.px--20,
.pr--20 {
    padding-right: 20px !important;
}

.p--20,
.px--20,
.pl--20 {
    padding-left: 20px !important;
}

.p--30,
.py--30,
.pt--30 {
    padding-top: 30px !important;
}

.p--30,
.py--30,
.pb--30 {
    padding-bottom: 30px !important;
}

.p--30,
.px--30,
.pr--30 {
    padding-right: 30px !important;
}

.p--30,
.px--30,
.pl--30 {
    padding-left: 30px !important;
}