/* padding-y layout --------------------------------------------------------*/

/* @group @variables */

:root {
--section-spacing-top: 4.5rem;
--section-spacing-bottom: 4.5rem;
}

/* @end @variables */

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

/* @group @variables */

: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 */

/* @group @variables */

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

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

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

}

/* @end @variables */

/* @group @variables */

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

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

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

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

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

}

}

/* @end @variables */

/* @group @variables */

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

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

:root {
--x-padding-tertiary: calc((100vw - 50rem) / 2);
--x-padding-tertiary-right: var(--x-padding-tertiary);
--x-padding-tertiary-left: var(--x-padding-tertiary);
}

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

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

}

}

/* @end @variables */

/* @group @variables */

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

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

:root {
--x-padding-quaternary: calc((100vw - 60rem) / 2);
--x-padding-quaternary-right: var(--x-padding-quaternary);
--x-padding-quaternary-left: var(--x-padding-quaternary);
}

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

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

}

}

/* @end @variables */

/* @group @variables */

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

:root {
--x-padding-proto: calc((100vw - 30rem) / 2);
--x-padding-proto-right: var(--x-padding-proto);
--x-padding-proto-left: var(--x-padding-proto);
}

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

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

}

}

/* @end @variables */