/* padding-x layout -------------------------------------------------------- */

/* @group @variables x-padding */

:root {
--x-padding-base: 4.375vw;
}

@media all and (min-width: 80em) {

:root {
--x-padding-base: calc((100vw - 74rem) / 2);
/*--x-padding-base: calc(2.5vw + 1.5rem); */
}

}

/* @end @variables x-padding */

/* @group @variables x-padding */

:root {
--x-padding: var(--x-padding-base);
--x-padding-right: var(--x-padding);
--x-padding-left: var(--x-padding);
}

@supports (padding-top: constant(safe-area-inset-top)) {

:root {
--x-padding-right: calc(env(safe-area-inset-right) + var(--x-padding));
--x-padding-left: calc(env(safe-area-inset-left) + var(--x-padding));
}

}

/* @end @variables x-padding */

/* -------------------------------------------------------- */

/* @group @variables */

:root {
--push-padding-right: var(--x-padding-right);
--push-padding-left: var(--x-padding-left);
}

@media all and (min-width: 48em) {

:root {
--push-padding: calc((100vw - 40rem) / 2);
--push-padding-right: var(--push-padding);
--push-padding-left: var(--push-padding);
}

@supports (padding-top: constant(safe-area-inset-top)) {

:root {
--push-padding-right: calc(env(safe-area-inset-right) + var(--push-padding));
--push-padding-left: calc(env(safe-area-inset-left) + var(--push-padding));
}

}

}

/* @end @variables */

/* -------------------------------------------------------- */

/* @group @variables */

@media all and (max-width:47.9375em) {

:root {
--mobile-padding-right: var(--x-padding-right);
--mobile-padding-left: var(--x-padding-left);
}

}

/* @end @variables */

/* @group @variables */

@media all and (min-width:48em) {

:root {
--tablet-padding-right: var(--x-padding-right);
--tablet-padding-left: var(--x-padding-left);
}

}

/* @end @variables */

/* @group @variables */

@media all and (min-width:62em) {

:root {
--desktop-padding-right: var(--x-padding-right);
--desktop-padding-left: var(--x-padding-left);
}

}

/* @end @variables */

/* -------------------------------------------------------- */

/* @group @variables - text-align */

@media all and (min-width:48em) {

:root {
--text-align-proto: left;
--text-align-deutero: center;
--text-align-trito: right;
}

}

@media all and (max-width:47.9375em) {

:root {
--text-align-primero: left;
--text-align-segundo: center;
--text-align-right: tercero;
}

}

/* @end @variables - text-align */