/*Vinculacion a las librerías, tipografía, colores, etc*/
@import url(normalize.css);
@import url(tipografia.css);
@import url(colores.css);
@import url(botones.css);
@import url(cards.css);
@import url(componentes.css);

/* Estructura HTML */
*, *::after,*::before {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
section {position: relative; margin-bottom: 50px;}
.container-fluid {  padding: 0;}
.grid-contenedor{max-width: 1370px; position: relative;  margin: auto; text-align: center;}
.main { padding-bottom: 0;}


/* Libreria de estilos marging / padding / width */
/* Display */
.dp-flex { display: flex; flex-wrap: wrap; }
.dp-block { display: block; }
.dp-inline { display: inline; }


/* Width */
.width-100 { width: 100%;}
.width-75 { width: 75%;}
.width-70 {width: 70%;}
.width-60 {width: 60%;}
.width-50 {width: 50%;}
.width-40 {width: 40%;}
.width-30 {width: 30%;}
.width-25 {width: 25%;}
.width-auto {width: auto;}


/*Alineacion de textos */
.txt-left {text-align: left;}
.txt-right {text-align: right;}
.txt-center {text-align: center;}


.just-cont-start { justify-content: start;}
.just-cont-end { justify-content: end;}
.just-cont-center { justify-content: center;}
.just-cont-between { justify-content: space-between;}
.just-cont-around { justify-content: space-around;}
.just-cont-evenly { justify-content: space-evenly;}

/* Margin */
 .mg-top-0 { margin-bottom: 0em; }
 .mg-top-1 { margin-top: 1em; }
 .mg-top-2 { margin-top: 2em; }
 .mg-top-3 { margin-top: 3em; }
 .mg-top-4 { margin-top: 4em; }
 .mg-top-5 { margin-top: 5em; }

 .mg-bottom-0 { margin-bottom: 0em; }
 .mg-bottom-1 { margin-bottom: 1em; }
 .mg-bottom-2 { margin-bottom: 2em; }
 .mg-bottom-3 { margin-bottom: 3em; }
 .mg-bottom-4 { margin-bottom: 4em; }
 .mg-bottom-5 { margin-bottom: 5em; }

 .mg-y-1 { margin-top: 1em; margin-bottom: 1em; }
 .mg-y-2 { margin-top: 2em; margin-bottom: 2em; }
 .mg-y-3 { margin-top: 3em; margin-bottom: 3em; }
 .mg-y-4 { margin-top: 4em; margin-bottom: 4em; }
 .mg-y-5 { margin-top: 5em; margin-bottom: 5em; }

 .mg-left-1 { margin-left: 1em; }
 .mg-left-2 { margin-left: 2em; }
 .mg-left-3 { margin-left: 3em; }
 .mg-left-4 { margin-left: 4em; }
 .mg-left-5 { margin-left: 5em; }

 .mg-right-1 { margin-right: 1em; }
 .mg-right-2 { margin-right: 2em; }
 .mg-right-3 { margin-right: 3em; }
 .mg-right-4 { margin-right: 4em; }
 .mg-right-5 { margin-right: 5em; }

 .mg-x-1 { margin-left: 1em; margin-right: 1em; }
 .mg-x-2 { margin-left: 2em; margin-right: 2em; }
 .mg-x-3 { margin-left: 3em; margin-right: 3em; }
 .mg-x-4 { margin-left: 4em; margin-right: 4em; }
 .mg-x-5 { margin-left: 5em; margin-right: 5em; }


/* Padding */
 .pd-top-1 { padding-top: 1em; }
 .pd-top-2 { padding-top: 2em; }
 .pd-top-3 { padding-top: 3em; }
 .pd-top-4 { padding-top: 4em; }
 .pd-top-5 { padding-top: 5em; }

 .pd-bottom-1 { padding-bottom: 1em; }
 .pd-bottom-2 { padding-bottom: 2em; }
 .pd-bottom-3 { padding-bottom: 3em; }
 .pd-bottom-4 { padding-bottom: 4em; }
 .pd-bottom-5 { padding-bottom: 5em; }

 .pd-y-1 { padding-top: 1em; padding-bottom: 1em; }
 .pd-y-2 { padding-top: 2em; padding-bottom: 2em; }
 .pd-y-3 { padding-top: 3em; padding-bottom: 3em; }
 .pd-y-4 { padding-top: 4em; padding-bottom: 4em; }
 .pd-y-5 { padding-top: 5em; padding-bottom: 5em; }

 .pd-left-1 { padding-left: 1em; }
 .pd-left-2 { padding-left: 2em; }
 .pd-left-3 { padding-left: 3em; }
 .pd-left-4 { padding-left: 4em; }
 .pd-left-5 { padding-left: 5em; }

 .pd-right-1 { padding-right: 1em; }
 .pd-right-2 { padding-right: 2em; }
 .pd-right-3 { padding-right: 3em; }
 .pd-right-4 { padding-right: 4em; }
 .pd-right-5 { padding-right: 5em; }

 .pd-x-1 { padding-left: 1em; padding-right: 1em; }
 .pd-x-2 { padding-left: 2em; padding-right: 2em; }
 .pd-x-3 { padding-left: 3em; padding-right: 3em; }
 .pd-x-4 { padding-left: 4em; padding-right: 4em; }
 .pd-x-5 { padding-left: 5em; padding-right: 5em; }


/* Colores titulos y fondos */
/* Colores texto */
.color-main { color: var(--color--main); }
.color-secundary { color: var(--color--acento--100); }
.color-black { color: var(--color--neutral--100); }
.color-gray { color: var(--color--neutral--70); }
.color-white { color: var(--color--neutral--0); }


/* Colores para fondos */
/* Primary */
.bg-primary-main { background-color: var(--color--main); }
.bg-primary-red { background-color: var(--color--principal--rojo); }
.bg-primary-light-red { background-color: var(--color--principal--rojo-claro); }
.bg-primary-dark-orange { background-color: var(--color--main-dark); }
.bg-primary-light-orange { background-color: var(--color--principal--naranja-claro); }
.bg-primary-yellow { background-color: var(--color--principal-amarillo); }
.bg-primary-orange-70 { background-color: var(--color--principal--70); }
.bg-primary-orange-30 { background-color: var(--color--principal--30); }


/* Secundary */
.bg-secundary-100 { background-color: var(--color--acento--100); }
.bg-secundary-90 { background-color: var(--color--acento--90); }
.bg-secundary-80 { background-color: var(--color--acento--80); }
.bg-secundary-70 { background-color: var(--color--acento--70); }
.bg-secundary-60 { background-color: var(--color--acento--60); }
.bg-secundary-50 { background-color: var(--color--acento--50); }
.bg-secundary-40 { background-color: var(--color--acento--40); }


/* Neutral */
.bg-neutral-100 { background-color: var(--color--neutral--100); }
.bg-neutral-90 { background-color: var(--color--neutral--90); }
.bg-neutral-80 { background-color: var(--color--neutral--80); }
.bg-neutral-70 { background-color: var(--color--neutral--70); }
.bg-neutral-60 { background-color: var(--color--neutral--60); }
.bg-neutral-50 { background-color: var(--color--neutral--50); }
.bg-neutral-40 { background-color: var(--color--neutral--40); }
.bg-neutral-30 { background-color: var(--color--neutral--30); }
.bg-neutral-20 { background-color: var(--color--neutral--20); }
.bg-neutral-10 { background-color: var(--color--neutral--10); }
.bg-neutral-0 { background-color: var(--color--neutral--0); }


/* Complementary */
.bg-aquamarine {background-color: var(--color--adicional--azul--aguamarina);}
.bg-light-blue { background-color: var(--color--adicional--azul--claro); }
.bg-dark-blue { background-color: var(--color--adicional--azul--oscuro); }
.bg-light-green { background-color: var(--color--adicional--verde--claro); }
.bg-green { background-color: var(--color--adicional--verde); }
.bg-light-purple { background-color: var(--color--adicional--morado--claro); }
.bg-dark-purple { background-color: var(--color--adicional--morado--oscuro); }
.bg-light-yellow { background-color: var(--color--adicional--amarillo--claro); }
.bg-pink { background-color: var(--color--adicional--rosado); }
.bg-light-red { background-color: var(--color--adicional--rojo--claro); }
.bg-light-orange { background-color: var(--color--adicional--naranja--claro); }

/*Fondos translucidos*/
.bg-aquamarine-80 { background-color: var(--color--fondo--azul--aguamarina--80);}

/* Espaciado Gap*/
.gap-20 {gap: 20px;}
.gap-30 {gap: 30px;}
.gap-40 {gap: 40px;}
.gap-50 {gap: 50px;}
.gap-60 {gap: 60px;}
.gap-70 {gap: 70px;}

/* Estilos para imágenes*/
.border-radius {
    border-radius: 15px;
}

/* Media Queries */
/* Escritorio (xl) */
@media (max-width: 1400px) {

.grid-contenedor{ max-width: 1170px; }


/* Display */
.d-flex-xl { display: flex; flex-wrap: wrap; }
.d-block-xl { display: block; }
.d-inline-xl { display: inline; }


/* Width */
.width-100-xl { width: 100%; }
.width-75-xl { width: 75%; }
.width-70-xl { width: 70%; }
.width-50-xl { width: 50%; }
.width-30-xl { width: 30%; }
.width-25-xl { width: 25%; }
.width-auto-xl { width: auto; }


/* Text align */
.txt-left-xl { text-align: left; }
.txt-right-xl { text-align: right; }
.txt-center-xl { text-align: center; }


/* Margin & padding */
 .mg-top-1-xl { margin-top: 1em; }
 .mg-top-2-xl { margin-top: 2em; }
 .mg-top-3-xl { margin-top: 3em; }
 .mg-top-4-xl { margin-top: 4em; }
 .mg-top-5-xl { margin-top: 5em; }

 .mg-bottom-1-xl { margin-bottom: 1em; }
 .mg-bottom-2-xl { margin-bottom: 2em; }
 .mg-bottom-3-xl { margin-bottom: 3em; }
 .mg-bottom-4-xl { margin-bottom: 4em; }
 .mg-bottom-5-xl { margin-bottom: 5em; }

 .mg-y-1-xl { margin-top: 1em; margin-bottom: 1em; }
 .mg-y-2-xl { margin-top: 2em; margin-bottom: 2em; }
 .mg-y-3-xl { margin-top: 3em; margin-bottom: 3em; }
 .mg-y-4-xl { margin-top: 4em; margin-bottom: 4em; }
 .mg-y-5-xl { margin-top: 5em; margin-bottom: 5em; }

 .mg-left-1-xl { margin-left: 1em; }
 .mg-left-2-xl { margin-left: 2em; }
 .mg-left-3-xl { margin-left: 3em; }
 .mg-left-4-xl { margin-left: 4em; }
 .mg-left-5-xl { margin-left: 5em; }

 .mg-right-1-xl { margin-right: 1em; }
 .mg-right-2-xl { margin-right: 2em; }
 .mg-right-3-xl { margin-right: 3em; }
 .mg-right-4-xl { margin-right: 4em; }
 .mg-right-5-xl { margin-right: 5em; }

 .mg-x-1-xl { margin-left: 1em; margin-right: 1em; }
 .mg-x-2-xl { margin-left: 2em; margin-right: 2em; }
 .mg-x-3-xl { margin-left: 3em; margin-right: 3em; }
 .mg-x-4-xl { margin-left: 4em; margin-right: 4em; }
 .mg-x-5-xl { margin-left: 5em; margin-right: 5em; }

 .pd-top-1-xl { padding-top: 1em; }
 .pd-top-2-xl { padding-top: 2em; }
 .pd-top-3-xl { padding-top: 3em; }
 .pd-top-4-xl { padding-top: 4em; }
 .pd-top-5-xl { padding-top: 5em; }

 .pd-bottom-1-xl { padding-bottom: 1em; }
 .pd-bottom-2-xl { padding-bottom: 2em; }
 .pd-bottom-3-xl { padding-bottom: 3em; }
 .pd-bottom-4-xl { padding-bottom: 4em; }
 .pd-bottom-5-xl { padding-bottom: 5em; }

 .pd-y-1-xl { padding-top: 1em; padding-bottom: 1em; }
 .pd-y-2-xl { padding-top: 2em; padding-bottom: 2em; }
 .pd-y-3-xl { padding-top: 3em; padding-bottom: 3em; }
 .pd-y-4-xl { padding-top: 4em; padding-bottom: 4em; }
 .pd-y-5-xl { padding-top: 5em; padding-bottom: 5em; }

 .pd-left-1-xl { padding-left: 1em; }
 .pd-left-2-xl { padding-left: 2em; }
 .pd-left-3-xl { padding-left: 3em; }
 .pd-left-4-xl { padding-left: 4em; }
 .pd-left-5-xl { padding-left: 5em; }

 .pd-right-1-xl { padding-right: 1em; }
 .pd-right-2-xl { padding-right: 2em; }
 .pd-right-3-xl { padding-right: 3em; }
 .pd-right-4-xl { padding-right: 4em; }
 .pd-right-5-xl { padding-right: 5em; }

 .pd-x-1-xl { padding-left: 1em; padding-right: 1em; }
 .pd-x-2-xl { padding-left: 2em; padding-right: 2em; }
 .pd-x-3-xl { padding-left: 3em; padding-right: 3em; }
 .pd-x-4-xl { padding-left: 4em; padding-right: 4em; }
 .pd-x-5-xl { padding-left: 5em; padding-right: 5em; }

.gap-20-xl {gap: 20px;}
.gap-30-xl {gap: 30px;}
.gap-40-xl {gap: 40px;}
.gap-50-xl {gap: 50px;}
.gap-60-xl {gap: 60px;}
.gap-70-xl {gap: 70px;}

}

/* Laptop (lg) */
@media (max-width: 1200px) {

.grid-contenedor{ max-width: 1024px; }


/* Display */
.d-flex-lg { display: flex; flex-wrap: wrap; }
.d-block-lg { display: block; }
.d-inline-lg { display: inline; }


/* Width */
.width-100-lg { width: 100%; }
.width-75-lg { width: 75%; }
.width-70-lg { width: 70%; }
.width-50-lg { width: 50%; }
.width-30-lg { width: 30%; }
.width-25-lg { width: 25%; }
.width-auto-lg { width: auto; }


/* Text align */
.txt-left-lg { text-align: left; }
.txt-right-lg { text-align: right; }
.txt-center-lg { text-align: center; }


/* Margin & padding */
 .mg-top-1-lg { margin-top: 1em; }
 .mg-top-2-lg { margin-top: 2em; }
 .mg-top-3-lg { margin-top: 3em; }
 .mg-top-4-lg { margin-top: 4em; }
 .mg-top-5-lg { margin-top: 5em; }

 .mg-bottom-1-lg { margin-bottom: 1em; }
 .mg-bottom-2-lg { margin-bottom: 2em; }
 .mg-bottom-3-lg { margin-bottom: 3em; }
 .mg-bottom-4-lg { margin-bottom: 4em; }
 .mg-bottom-5-lg { margin-bottom: 5em; }

 .mg-y-1-lg { margin-top: 1em; margin-bottom: 1em; }
 .mg-y-2-lg { margin-top: 2em; margin-bottom: 2em; }
 .mg-y-3-lg { margin-top: 3em; margin-bottom: 3em; }
 .mg-y-4-lg { margin-top: 4em; margin-bottom: 4em; }
 .mg-y-5-lg { margin-top: 5em; margin-bottom: 5em; }

 .mg-left-1-lg { margin-left: 1em; }
 .mg-left-2-lg { margin-left: 2em; }
 .mg-left-3-lg { margin-left: 3em; }
 .mg-left-4-lg { margin-left: 4em; }
 .mg-left-5-lg { margin-left: 5em; }

 .mg-right-1-lg { margin-right: 1em; }
 .mg-right-2-lg { margin-right: 2em; }
 .mg-right-3-lg { margin-right: 3em; }
 .mg-right-4-lg { margin-right: 4em; }
 .mg-right-5-lg { margin-right: 5em; }

 .mg-x-1-lg { margin-left: 1em; margin-right: 1em; }
 .mg-x-2-lg { margin-left: 2em; margin-right: 2em; }
 .mg-x-3-lg { margin-left: 3em; margin-right: 3em; }
 .mg-x-4-lg { margin-left: 4em; margin-right: 4em; }
 .mg-x-5-lg { margin-left: 5em; margin-right: 5em; }

 .pd-top-1-lg { padding-top: 1em; }
 .pd-top-2-lg { padding-top: 2em; }
 .pd-top-3-lg { padding-top: 3em; }
 .pd-top-4-lg { padding-top: 4em; }
 .pd-top-5-lg { padding-top: 5em; }

 .pd-bottom-1-lg { padding-bottom: 1em; }
 .pd-bottom-2-lg { padding-bottom: 2em; }
 .pd-bottom-3-lg { padding-bottom: 3em; }
 .pd-bottom-4-lg { padding-bottom: 4em; }
 .pd-bottom-5-lg { padding-bottom: 5em; }

 .pd-y-1-lg { padding-top: 1em; padding-bottom: 1em; }
 .pd-y-2-lg { padding-top: 2em; padding-bottom: 2em; }
 .pd-y-3-lg { padding-top: 3em; padding-bottom: 3em; }
 .pd-y-4-lg { padding-top: 4em; padding-bottom: 4em; }
 .pd-y-5-lg { padding-top: 5em; padding-bottom: 5em; }

 .pd-left-1-lg { padding-left: 1em; }
 .pd-left-2-lg { padding-left: 2em; }
 .pd-left-3-lg { padding-left: 3em; }
 .pd-left-4-lg { padding-left: 4em; }
 .pd-left-5-lg { padding-left: 5em; }

 .pd-right-1-lg { padding-right: 1em; }
 .pd-right-2-lg { padding-right: 2em; }
 .pd-right-3-lg { padding-right: 3em; }
 .pd-right-4-lg { padding-right: 4em; }
 .pd-right-5-lg { padding-right: 5em; }

 .pd-x-1-lg { padding-left: 1em; padding-right: 1em; }
 .pd-x-2-lg { padding-left: 2em; padding-right: 2em; }
 .pd-x-3-lg { padding-left: 3em; padding-right: 3em; }
 .pd-x-4-lg { padding-left: 4em; padding-right: 4em; }
 .pd-x-5-lg { padding-left: 5em; padding-right: 5em; }

 .gap-20-lg {gap: 20px;}
.gap-30-lg {gap: 30px;}
.gap-40-lg {gap: 40px;}
.gap-50-lg {gap: 50px;}
.gap-60-lg {gap: 60px;}
.gap-70-lg {gap: 70px;}

}


/* Tablet large  (l) */
@media (max-width: 992px) {

section { margin-bottom: 30px; }
.grid-contenedor{ max-width: 820px; }


/* Display */
.d-flex-l { display: flex; flex-wrap: wrap; }
.d-block-l { display: block; }
.d-inline-l { display: inline; }


/* Width */
.width-100-l { width: 100%; }
.width-75-l { width: 75%; }
.width-70-l { width: 70%; }
.width-50-l { width: 50%; }
.width-30-l { width: 30%; }
.width-25-l { width: 25%; }
.width-auto-l { width: auto; }


/* Text align */
.txt-left-l { text-align: left; }
.txt-right-l { text-align: right; }
.txt-center-l { text-align: center; }


/* Margin & padding */
 .mg-top-1-l { margin-top: 1em; }
 .mg-top-2-l { margin-top: 2em; }
 .mg-top-3-l { margin-top: 3em; }
 .mg-top-4-l { margin-top: 4em; }
 .mg-top-5-l { margin-top: 5em; }

 .mg-bottom-1-l { margin-bottom: 1em; }
 .mg-bottom-2-l { margin-bottom: 2em; }
 .mg-bottom-3-l { margin-bottom: 3em; }
 .mg-bottom-4-l { margin-bottom: 4em; }
 .mg-bottom-5-l { margin-bottom: 5em; }

 .mg-y-1-l { margin-top: 1em; margin-bottom: 1em; }
 .mg-y-2-l { margin-top: 2em; margin-bottom: 2em; }
 .mg-y-3-l { margin-top: 3em; margin-bottom: 3em; }
 .mg-y-4-l { margin-top: 4em; margin-bottom: 4em; }
 .mg-y-5-l { margin-top: 5em; margin-bottom: 5em; }

 .mg-left-1-l { margin-left: 1em; }
 .mg-left-2-l { margin-left: 2em; }
 .mg-left-3-l { margin-left: 3em; }
 .mg-left-4-l { margin-left: 4em; }
 .mg-left-5-l { margin-left: 5em; }

 .mg-right-1-l { margin-right: 1em; }
 .mg-right-2-l { margin-right: 2em; }
 .mg-right-3-l { margin-right: 3em; }
 .mg-right-4-l { margin-right: 4em; }
 .mg-right-5-l { margin-right: 5em; }

 .mg-x-1-l { margin-left: 1em; margin-right: 1em; }
 .mg-x-2-l { margin-left: 2em; margin-right: 2em; }
 .mg-x-3-l { margin-left: 3em; margin-right: 3em; }
 .mg-x-4-l { margin-left: 4em; margin-right: 4em; }
 .mg-x-5-l { margin-left: 5em; margin-right: 5em; }

 .pd-top-1-l { padding-top: 1em; }
 .pd-top-2-l { padding-top: 2em; }
 .pd-top-3-l { padding-top: 3em; }
 .pd-top-4-l { padding-top: 4em; }
 .pd-top-5-l { padding-top: 5em; }

 .pd-bottom-1-l { padding-bottom: 1em; }
 .pd-bottom-2-l { padding-bottom: 2em; }
 .pd-bottom-3-l { padding-bottom: 3em; }
 .pd-bottom-4-l { padding-bottom: 4em; }
 .pd-bottom-5-l { padding-bottom: 5em; }

 .pd-y-1-l { padding-top: 1em; padding-bottom: 1em; }
 .pd-y-2-l { padding-top: 2em; padding-bottom: 2em; }
 .pd-y-3-l { padding-top: 3em; padding-bottom: 3em; }
 .pd-y-4-l { padding-top: 4em; padding-bottom: 4em; }
 .pd-y-5-l { padding-top: 5em; padding-bottom: 5em; }

 .pd-left-1-l { padding-left: 1em; }
 .pd-left-2-l { padding-left: 2em; }
 .pd-left-3-l { padding-left: 3em; }
 .pd-left-4-l { padding-left: 4em; }
 .pd-left-5-l { padding-left: 5em; }

 .pd-right-1-l { padding-right: 1em; }
 .pd-right-2-l { padding-right: 2em; }
 .pd-right-3-l { padding-right: 3em; }
 .pd-right-4-l { padding-right: 4em; }
 .pd-right-5-l { padding-right: 5em; }

 .pd-x-1-l { padding-left: 1em; padding-right: 1em; }
 .pd-x-2-l { padding-left: 2em; padding-right: 2em; }
 .pd-x-3-l { padding-left: 3em; padding-right: 3em; }
 .pd-x-4-l { padding-left: 4em; padding-right: 4em; }
 .pd-x-5-l { padding-left: 5em; padding-right: 5em; }
 
 .gap-20-l {gap: 20px;}
.gap-30-l {gap: 30px;}
.gap-40-l {gap: 40px;}
.gap-50-l {gap: 50px;}
.gap-60-l {gap: 60px;}
.gap-70-l {gap: 70px;}
}


/* Tablet small*/
@media (max-width: 768px) {

.grid-contenedor{ max-width: 720px; }

}

/* Movil (s) */
@media (max-width: 576px) {

.grid-contenedor{ max-width: 540px; padding: 0 20px; }


/* Display */
.d-flex-s { display: flex; flex-wrap: wrap; }
.d-block-s {display: block;}
.d-inline-s { display: inline; }


/* Width */
.width-100-s { width: 100%; }
.width-75-s { width: 75%; }
.width-70-s { width: 70%; }
.width-50-s { width: 50%; }
.width-30-s { width: 30%; }
.width-25-s { width: 25%; }
.width-auto-s { width: auto; }


/* Text align */
.txt-left-s { text-align: left; }
.txt-right-s { text-align: right; }
.txt-center-s { text-align: center; }


/* Margin & padding */
 .mg-top-1-s { margin-top: 1em; }
 .mg-top-2-s { margin-top: 2em; }
 .mg-top-3-s { margin-top: 3em; }
 .mg-top-4-s { margin-top: 4em; }
 .mg-top-5-s { margin-top: 5em; }

 .mg-bottom-1-s { margin-bottom: 1em; }
 .mg-bottom-2-s { margin-bottom: 2em; }
 .mg-bottom-3-s { margin-bottom: 3em; }
 .mg-bottom-4-s { margin-bottom: 4em; }
 .mg-bottom-5-s { margin-bottom: 5em; }

 .mg-y-1-s { margin-top: 1em; margin-bottom: 1em; }
 .mg-y-2-s { margin-top: 2em; margin-bottom: 2em; }
 .mg-y-3-s { margin-top: 3em; margin-bottom: 3em; }
 .mg-y-4-s { margin-top: 4em; margin-bottom: 4em; }
 .mg-y-5-s { margin-top: 5em; margin-bottom: 5em; }

 .mg-left-1-s { margin-left: 1em; }
 .mg-left-2-s { margin-left: 2em; }
 .mg-left-3-s { margin-left: 3em; }
 .mg-left-4-s { margin-left: 4em; }
 .mg-left-5-s { margin-left: 5em; }

 .mg-right-1-s { margin-right: 1em; }
 .mg-right-2-s { margin-right: 2em; }
 .mg-right-3-s { margin-right: 3em; }
 .mg-right-4-s { margin-right: 4em; }
 .mg-right-5-s { margin-right: 5em; }

 .mg-x-1-s { margin-left: 1em; margin-right: 1em; }
 .mg-x-2-s { margin-left: 2em; margin-right: 2em; }
 .mg-x-3-s { margin-left: 3em; margin-right: 3em; }
 .mg-x-4-s { margin-left: 4em; margin-right: 4em; }
 .mg-x-5-s { margin-left: 5em; margin-right: 5em; }

 .pd-top-1-s { padding-top: 1em; }
 .pd-top-2-s { padding-top: 2em; }
 .pd-top-3-s { padding-top: 3em; }
 .pd-top-4-s { padding-top: 4em; }
 .pd-top-5-s { padding-top: 5em; }

 .pd-bottom-1-s { padding-bottom: 1em; }
 .pd-bottom-2-s { padding-bottom: 2em; }
 .pd-bottom-3-s { padding-bottom: 3em; }
 .pd-bottom-4-s { padding-bottom: 4em; }
 .pd-bottom-5-s { padding-bottom: 5em; }

 .pd-y-1-s { padding-top: 1em; padding-bottom: 1em; }
 .pd-y-2-s { padding-top: 2em; padding-bottom: 2em; }
 .pd-y-3-s { padding-top: 3em; padding-bottom: 3em; }
 .pd-y-4-s { padding-top: 4em; padding-bottom: 4em; }
 .pd-y-5-s { padding-top: 5em; padding-bottom: 5em; }

 .pd-left-1-s { padding-left: 1em; }
 .pd-left-2-s { padding-left: 2em; }
 .pd-left-3-s { padding-left: 3em; }
 .pd-left-4-s { padding-left: 4em; }
 .pd-left-5-s { padding-left: 5em; }

 .pd-right-1-s { padding-right: 1em; }
 .pd-right-2-s { padding-right: 2em; }
 .pd-right-3-s { padding-right: 3em; }
 .pd-right-4-s { padding-right: 4em; }
 .pd-right-5-s { padding-right: 5em; }

 .pd-x-1-s { padding-left: 1em; padding-right: 1em; }
 .pd-x-2-s { padding-left: 2em; padding-right: 2em; }
 .pd-x-3-s { padding-left: 3em; padding-right: 3em; }
 .pd-x-4-s { padding-left: 4em; padding-right: 4em; }
 .pd-x-5-s { padding-left: 5em; padding-right: 5em; }

.gap-20-s {gap: 20px;}
.gap-30-s {gap: 30px;}
.gap-40-s {gap: 40px;}
.gap-50-s {gap: 50px;}
.gap-60-s {gap: 60px;}
.gap-70-s {gap: 70px;}
}