@import url('../../fonts/inter-display/stylesheet.css');

@font-face {
    font-family: "vg-neutral-solid";
    src:url("../../icons/vg-neutra-solid/vg-neutra-solid.eot");
    src:url("../../icons/vg-neutra-solid/vg-neutra-solid.eot?#iefix") format("embedded-opentype"),
        url("../../icons/vg-neutra-solid/vg-neutra-solid.woff") format("woff"),
        url("../../icons/vg-neutra-solid/vg-neutra-solid.ttf") format("truetype"),
        url("../../icons/vg-neutra-solid/vg-neutra-solid.svg#mazzucco-mello") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "pulse-rh-linear";
    src:url("../../icons/pulse-rh-linear/pulse-rh-linear.eot");
    src:url("../../icons/pulse-rh-linear/pulse-rh-linear.eot?#iefix") format("embedded-opentype"),
        url("../../icons/pulse-rh-linear/pulse-rh-linear.woff") format("woff"),
        url("../../icons/pulse-rh-linear/pulse-rh-linear.ttf") format("truetype"),
        url("../../icons/pulse-rh-linear/pulse-rh-linear.svg#mazzucco-mello") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {

    --fm-em-size: 2048;
    --fm-cap-height: 1490;
    --fm-ascender: 1984;
    --fm-descender: 494;

    --f-light: 300;
    --f-book: 400;
    --f-medium: 500;
    --f-bold: 600;
    --f-heavy: 700;
    
    --vg-ns: 'vg-neutra-solid';
    --vg-ns-size-ratio: 1;
    
    --pulse: 'pulse-rh-linear';
    --pulse-size-ratio: 1;

    --grid-division: 10;

    --fr: calc(1 / var(--grid-division)); /* fração */
    --hfr: calc(var(--fr) / 2); /* meia fração */
    --trd: calc(var(--fr) / 3); /* um terço de fração */
    --qt: calc(var(--fr) / 4); /* um quarto de fração */
    --htrd: calc(var(--fr) / 6); /* meio terço de fração */
    --hqt: calc(var(--fr) / 8); /* meio quarto de fração */
    --un: calc(var(--fr) / 16); /* unidade */

    --vw-fr: calc(var(--fr) * 100vw);
    --vw-hfr: calc(var(--hfr) * 100vw);
    --vw-trd:  calc(var(--trd) * 100vw);
    --vw-qt: calc(var(--qt) * 100vw);
    --vw-htrd:  calc(var(--htrd) * 100vw);
    --vw-hqt:  calc(var(--hqt) * 100vw);
    --vw-un: calc(var(--un) * 100vw);

    --grd-1: calc(var(--vw-fr) * 1);
    --grd-2: calc(var(--vw-fr) * 2);
    --grd-3: calc(var(--vw-fr) * 3);
    --grd-4: calc(var(--vw-fr) * 4);
    --grd-5: calc(var(--vw-fr) * 5);
    --grd-6: calc(var(--vw-fr) * 6);
    --grd-7: calc(var(--vw-fr) * 7);
    --grd-8: calc(var(--vw-fr) * 8);
    --grd-9: calc(var(--vw-fr) * 9);
    --grd-10: calc(var(--vw-fr) * 10);
    /* --grd-11: calc(var(--vw-fr) * 11);
    --grd-12: calc(var(--vw-fr) * 12);
    --grd-13: calc(var(--vw-fr) * 13);
    --grd-14: calc(var(--vw-fr) * 14);
    --grd-15: calc(var(--vw-fr) * 15);
    --grd-16: calc(var(--vw-fr) * 16); */


    --sz-1: var(--vw-un);
    --sz-1h: calc(var(--sz-1) * 1.5);
    --sz-2: calc(var(--sz-1) * 2);
    --sz-2h: calc(var(--sz-1) * 2.5);
    --sz-3: calc(var(--sz-1) * 3);

    --line-gap-ratio: 1;

    --white-R: 250;
    --white-G: 247;
    --white-B: 250;
    --white-A: 1;
    --white: rgba(var(--white-R), var(--white-G), var(--white-B), var(--white-A));
    
    --blue-R: 60;
    --blue-G: 130;
    --blue-B: 255;
    --blue-A: 1;
    --blue: rgba(var(--blue-R), var(--blue-G), var(--blue-B), var(--blue-A));

    --purple-R: 140;
    --purple-G: 75;
    --purple-B: 255;
    --purple-A: 1;
    --purple: rgba(var(--purple-R), var(--purple-G), var(--purple-B), var(--purple-A));

    --green-R: 50;
    --green-G: 250;
    --green-B: 220;
    --green-A: 1;
    --green: rgba(var(--green-R), var(--green-G), var(--green-B), var(--green-A));

    --red-R: 255;
    --red-G: 70;
    --red-B: 120;
    --red-A: 1;
    --red: rgba(var(--red-R), var(--red-G), var(--red-B), var(--red-A));

    --yellow-R: 255;
    --yellow-G: 215;
    --yellow-B: 105;
    --yellow-A: 1;
    --yellow: rgba(var(--yellow-R), var(--yellow-G), var(--yellow-B), var(--yellow-A));

    --orange-R: 255;
    --orange-G: 145;
    --orange-B: 115;
    --orange-A: 1;
    --orange: rgba(var(--orange-R), var(--orange-G), var(--orange-B), var(--orange-A));

    --light-gray-R: 195;
    --light-gray-G: 190;
    --light-gray-B: 200;
    --light-gray-A: 1;
    --light-gray: rgba(var(--light-gray-R), var(--light-gray-G), var(--light-gray-B), var(--light-gray-A));

    --gray-R: 90;
    --gray-G: 85;
    --gray-B: 110;
    --gray-A: 1;
    --gray: rgba(var(--gray-R), var(--gray-G), var(--gray-B), var(--gray-A));

    --dark-gray-R: 45;
    --dark-gray-G: 40;
    --dark-gray-B: 55; 
    --dark-gray-A: 1;
    --dark-gray: rgba(var(--dark-gray-R), var(--dark-gray-G), var(--dark-gray-B), var(--dark-gray-A));


    --alert: rgb(255,55,55);
    --warning: rgb(255,155,0);
    --notice: rgb(0, 185, 230);
    --done: rgb(125,225,80);
    --info: rgb(205,205,205);

    --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
    --ease-quad: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-quint: cubic-bezier(0.83, 0, 0.17, 1);
    --ease-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    /* ---- Structure Measures ---- */
    --base-size: var(--vw-un);
    --page-margin: var(--vw-qt);
    --display-gap: var(--vw-hfr);
    --row-gap: var(--vw-qt);
    --column-gap: var(--vw-qt);

    --base-easing: var(--ease-cubic);
}


/* // ESQUEMAS DE CORES // */
.dark-scheme
{
    --title-color: rgba(var(--white-R), var(--white-G), var(--white-B), var(--title-opacity, 1));
    --text-color: rgba(var(--white-R), var(--white-G), var(--white-B), var(--text-opacity, 1));
    --field-color: rgba(var(--white-R), var(--white-G), var(--white-B), var(--field-opacity, 1));
    --emphasis-color: rgba(var(--color-R, 0), var(--color-G, 255), var(--color-B, 255), var(--emphasis-opacity, 1));
    --shading: rgba(var(--color-R, 0), var(--color-G, 255), var(--color-B, 255), var(--shading-opacity, 1));
    --soft-shadow: rgba(var(--light-gray-R), var(--light-gray-G), var(--light-gray-B), var(--soft-shadow-opacity, 1));
    --background: rgba(var(--gray-R), var(--gray-G), var(--gray-B), var(--bg-opacity, 1));
    --modal-skin: rgba(var(--gray-R), var(--gray-G), var(--gray-B), var(--modal-skin-opacity, 1));
    --modal-container-background: rgba(var(--gray-R), var(--gray-G), var(--gray-B), var(--modal-container-opacity, 1));
    --button-color: rgba(var(--white-R, 0), var(--white-G, 255), var(--white-B, 255), var(--button-opacity, 1));
    --button-background: rgba(var(--color-R), var(--color-G), var(--color-B), var(--button-bg-opacity, 1));
    --link-color: rgba(var(--white-R), var(--white-G), var(--white-B), var(--link-opacity, 1));
    --link-highlight: rgba(var(--color-R, 0), var(--color-G, 255), var(--color-B, 255), var(--link-highlight-opacity, 1));
    --link-active: rgba(var(--white-R), var(--white-G), var(--white-B), var(--link-active-opacity, 1));
}

.light-scheme
{
    --title-color: rgba(var(--dark-gray-R), var(--dark-gray-G), var(--dark-gray-B), var(--title-opacity, 1));
    --text-color: rgba(var(--gray-R), var(--gray-G), var(--gray-B), var(--text-opacity, 1));
    --field-color: rgba(var(--gray-R), var(--gray-G), var(--gray-B), var(--field-opacity, 1));
    --emphasis-color: rgba(var(--color-R, 0), var(--color-G, 255), var(--color-B, 255), var(--emphasis-opacity, 1));
    --shading: rgba(var(--color-R, 0), var(--color-G, 255), var(--color-B, 255), var(--shading-opacity, 1));
    --soft-shadow: rgba(var(--light-gray-R), var(--light-gray-G), var(--light-gray-B), var(--soft-shadow-opacity, 1));
    --background: rgba(var(--white-R), var(--white-G), var(--white-B), var(--bg-opacity, 1));
    --modal-skin: rgba(var(--white-R), var(--white-G), var(--white-B), var(--modal-skin-opacity, 1));
    --modal-container-background: rgba(var(--white-R), var(--white-G), var(--white-B), var(--modal-container-opacity, 1));
    --button-color: rgba(var(--white-R, 0), var(--white-G, 255), var(--white-B, 255), var(--button-opacity, 1));
    --button-background: rgba(var(--color-R), var(--color-G), var(--color-B), var(--button-bg-opacity, 1));
    --link-color: rgba(var(--gray-R), var(--gray-G), var(--gray-B), var(--link-opacity, 1));
    --link-highlight: rgba(var(--color-R, 0), var(--color-G, 255), var(--color-B, 255), var(--link-highlight-opacity, 1));
    --link-active: rgba(var(--dark-gray-R), var(--dark-gray-G), var(--dark-gray-B), var(--link-active-opacity, 1));
    --hardlight: rgba(255,255,255, var(--hardlight-opacity, 1));
}

.blue
{
    --color-R: var(--blue-R);
    --color-G: var(--blue-G);
    --color-B: var(--blue-B);
}
.purple
{
    --color-R: var(--purple-R);
    --color-G: var(--purple-G);
    --color-B: var(--purple-B);
}
.red
{
    --color-R: var(--red-R);
    --color-G: var(--red-G);
    --color-B: var(--red-B);
}
.orange
{
    --color-R: var(--orange-R);
    --color-G: var(--orange-G);
    --color-B: var(--orange-B);
}
.yellow
{
    --color-R: var(--yellow-R);
    --color-G: var(--yellow-G);
    --color-B: var(--yellow-B);
}
.green
{
    --color-R: var(--green-R);
    --color-G: var(--green-G);
    --color-B: var(--green-B);
}


.blue, .purple, .red, .yellow, .green
{
    --button-background: rgba(var(--white-R), var(--white-G), var(--white-B), var(--button-bg-opacity, 1));
}
.blue, .purple, .red
{
    --button-color: rgba(var(--color-R), var(--color-G), var(--color-B), var(--button-opacity, 1));
}

.alert .button, .alert .close-button,
.warning .button, .warning .close-button,
.notice .button, .notice .close-button,
.done .button, .done .close-button,
.info .button, .info .close-button
{
    --button-color: rgba(var(--white-R), var(--white-G), var(--white-B), var(--button-opacity, 1));
    --button-background: rgba(0,0,0,.2);
}

.alert,.warning,.notice,.done,.info,.whatsapp
{
    --text-color: rgba(var(--white-R), var(--white-G), var(--white-B), var(--text-opacity, 1));
    --button-color: rgba(var(--white-R), var(--white-G), var(--white-B), var(--button-opacity, 1));
}
.alert
{
    --background: var(--alert);
    --button-background: var(--alert);
    --modal-container-background: var(--alert);
}
.warning
{
    --background: var(--warning);
    --button-background: var(--warning);
    --modal-container-background: var(--warning);
}
.notice
{
    --background: var(--notice);
    --button-background: var(--notice);
    --modal-container-background: var(--notice);
}
.done
{
    --background: var(--done);
    --button-background: var(--done);
    --modal-container-background: var(--done);
}
.info
{
    --background: var(--info);
    --button-background: var(--info);
    --modal-container-background: var(--info);
}
.whatsapp
{
    --background:rgb(38, 212, 102);
    --button-color: rgb(38, 212, 102);
    --button-background: rgb(255,255,255);
    --modal-container-background: rgb(38, 212, 102);
}

/* // ========== // */

*,
::after,
::before {
    /* Set */
    /* --lead-ratio para definir a distância entre os blocos de texto */

    --fm-size-ratio: calc(var(--fm-em-size) / var(--fm-cap-height));
    --fm-bound-correction: calc((((var(--fm-ascender) - var(--fm-cap-height)) - var(--fm-descender)) / 2) / var(--fm-cap-height));

    /* Get */
    --adjusted-font-size: calc(var(--font-size) * var(--fm-size-ratio));
    --line-height: calc(var(--font-size) * (var(--line-gap-ratio) + 1));
    --bound-adjustment: calc((var(--font-size) * (var(--line-gap-ratio) * -.5)) + (var(--font-size) * var(--fm-bound-correction) * -1));
    --trim-bottom: calc(var(--font-size) * var(--line-gap-ratio) * -1);
    --lead: calc(var(--font-size) * (var(--lead-ratio, 0) + 1));

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: var(--adjusted-font-size);
    font-style: inherit;
    font-weight: inherit;
    font-kerning: normal;
    font-variant: normal;
    text-decoration: none;
    font-family: inherit;
    border: none;
    outline: 0;
    box-shadow: none;
    line-height: var(--line-height);
    background: 0 0;
    position: relative;
}

body {
    --font-size: var(--base-size);
    font-family: 'Inter Display', Arial, Helvetica, sans-serif;
    width: 100%;
    display: block;
    font-size: var(--adjusted-font-size);
    font-style: normal;
    font-weight: var(--f-book);
    line-height: 100%;
}

span, b, strong, i, em, mark, small, del, ins, sub, sup, abbr, cite, bdo, q{ font-size: inherit; }
img, li{ display: block; }

::-webkit-input-placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
::-moz-placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
:-ms-input-placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
:-moz-placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
::placeholder {
    color: var(--field-color);
    display:block !important;
    opacity: 1;
}
input[type=file]::-ms-browse{ display: none; }
input[type=file]::-webkit-file-upload-button{ display: none; }
input[type=file]::file-selector-button{ display: none; }

*:not(label) > [type=file]{ background-color: #f00 !important; }

.p-icon
{
    --fm-em-size: 1000;
    --fm-cap-height: 1000;
    --fm-ascender: 1000;
    --fm-descender: 0;

    --f-light: 300;
    --f-regular: 400;
    --f-medium: 500;
    --f-semibold: 600;
    --f-bold: 700;

    font-family: var(--redhat);
}

/* // SISTEMA DE TEXTO // */

.prph, .title
{
    --lead-ratio: 1;
    --growed-size: calc(var(--base-size) * var(--grow));
}

.prph
{
    --font-size: var(--text-size, var(--growed-size, var(--base-size)));
    --font-color: var(--text-color);
    font-weight: var(--f-book);
}

.title
{
    --font-size: var(--title-size, var(--growed-size, var(--base-size)));
    --font-color: var(--title-color);
}

.prph > p,
.prph > li,
.prph > ul > li,
.prph > ol > li,
p.prph,
li.prph,
h1.title,
h2.title,
h3.title,
h4.title,
h5.title,
h6.title,
.title > h1,
.title > h2,
.title > h3,
.title > h4,
.title > h5,
.title > h6
{
    display: block;
    transform: translateY(var(--bound-adjustment));
    margin-bottom: var(--trim-bottom);
    color: var(--font-color, var(--foreground));
}

.prph > p + p,
.prph > ul:not(:first-child) > li,
.prph > ul:first-child > li:not(:first-child),
.prph > ol > li,
.prph > p + ul > li:first-of-type,
.prph > p + ol > li:first-of-type,
.prph > p + .title,
.prph > .title + p,
.prph > .title + ul > li:first-of-type,
.prph > .title + ol > li:first-of-type,
.prph > ul + p,
.prph > ul + .title,
.prph > ol + p,
.prph > ol + .title,
.prph > li + li,
.prph > li + li > ul > li:first-of-type,
.prph > li + li > ol > li:first-of-type,
p.prph + p,
p.prph + ul > li:first-of-type,
p.prph + ol > li:first-of-type,
li.prph + li,
li.prph + ul > li:first-of-type,
li.prph + ol > li:first-of-type
{
    margin-top: var(--lead);
}

.baseline-childs.lh-0, .baseline.lh-0{ --line-gap-ratio: 0; }
.baseline-childs.lh-05, .baseline.lh-05{ --line-gap-ratio: 0.5; }
.baseline-childs.lh-075, .baseline.lh-075{ --line-gap-ratio: .75; }
.baseline-childs.lh-1, .baseline.lh-1{ --line-gap-ratio: 1; }
.baseline-childs.lh-12, .baseline.lh-12{ --line-gap-ratio: 1.25; }
.baseline-childs.lh-15, .baseline.lh-15{ --line-gap-ratio: 1.5; }

.baseline, .baseline-childs > *{
    line-height: var(--line-height);
    transform: translateY(var(--bound-adjustment));
    margin-bottom: var(--trim-bottom);
}


.leading-childs.ld-0, .leading.ld-0{ --lead-ratio: 0; }
.leading-childs.ld-05, .leading.ld-05{ --lead-ratio: .5; }
.leading-childs.ld-075, .leading.ld-075{ --lead-ratio: .75; }
.leading-childs.ld-1, .leading.ld-1{ --lead-ratio: 1; }
.leading-childs.ld-125, .leading.ld-125{ --lead-ratio: 1.25; }
.leading-childs.ld-15, .leading.ld-15{ --lead-ratio: 1.5; }
.leading-childs.ld-2, .leading.ld-2{ --lead-ratio: 2; }

.leading, .leading-childs > * + *{ margin-top: var(--lead); }

.emphasis
{
    color: var(--emphasis-color);
}

.uppercase
{
    text-transform: uppercase;
}

.text-clip{
    display: -webkit-box;
    line-clamp: var(--lines, 1);
    -webkit-line-clamp: var(--lines, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(var(--lines, 1) * var(--line-height));
}

.fix-widow
{
    display: inline;
    white-space: nowrap;
}

.marker:not(ul),
ul.marker > li:not(.sublist)
{
    --item-mark: var(--mark, '\6e');
}

ul.marker > li:not(.sublist)::before
{
    content: var(--item-mark);
    font-family: var(--vg-ns);
    font-size: var(--font-size);
    line-height: var(--font-size);
    margin-right: calc(var(--font-size) * .5);
}

ul.marker.aligned > li{ padding-left: calc(var(--font-size) * 1.5); }
ul.marker.aligned > li:not(.sublist)::before{ margin-left: calc(var(--font-size) * -1.5); }

ul.marker.aligned.retracted > li{ margin-left: calc(var(--font-size) * -1.5); }

.txt-center{ text-align: center; }
.txt-right{ text-align: right; }
.txt-left{ text-align: left; }

.italic{ font-style: italic;}
.normal{ font-style: normal;}
.light{ font-weight: var(--f-light); }
.regular{ font-weight: var(--f-regular); }
.medium{ font-weight: var(--f-medium); }
.semibold{ font-weight: var(--f-semibold); }
.bold{ font-weight: var(--f-bold); }

/* ==== COMPONENTS ==== */

/* // LOADER // */
.loader
{
    --size: calc(var(--base-size) * 3);
    --color: var(--button-color);
}

.loader::before
{
    content: '';
    display: block;
    position: absolute;
    width: var(--size);
    height: var(--size);
    box-sizing: border-box;
    pointer-events: none;
    border-top: calc(var(--base-size) * .25) solid var(--color);
    border-left: calc(var(--base-size) * .25) solid var(--color);
    border-right: calc(var(--base-size) * .25) solid rgba(0,0,0,.25);
    border-bottom: calc(var(--base-size) * .25) solid rgba(0,0,0,.25);
    border-radius: 50%;

    animation: spin 2s linear infinite;
    animation-fill-mode: both;
}

.loader.skin::before
{
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background-image: linear-gradient(60deg, transparent, transparent, var(--background), 
    transparent, transparent);
    background-size: 100vw 100%;
    mix-blend-mode: overlay;
    opacity: .5;
    animation: loader-skin 3s linear infinite both;
}

@keyframes spin {
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
}

@keyframes loader-skin {
    0%{ background-position: 0 0; }
    100%{ background-position: 100vw 0; }
}


/* ==== STRUCTURES ==== */
.grid
{
    --default-divisions: 6;
    --default-rows: 2;

    --row-height: auto;

    --default-outside-vertical-margin: calc(var(--page-margin) * .5);
    --default-inside-vertical-margin: calc(var(--page-margin) * .5);
    --vertical-margin: 
        calc(
            var(--outside-vertical-margin, var(--default-outside-vertical-margin)) 
            + var(--inside-vertical-margin, var(--default-inside-vertical-margin))
        );

    --default-grid-column-gap: var(--column-gap);
    --half-gap: 
        calc(
            var(--grid-column-gap, var(--default-grid-column-gap)) * .5
        );

    --default-middle-column-gap: var(--column-gap);
    --half-middle-gap: 
        calc(
            var(--middle-column-gap, var(--default-middle-column-gap)) * .5
        );

    --default-outside-horizontal-margin: calc(var(--display-gap) * .5);
    --default-inside-horizontal-margin: calc(var(--display-gap) * .5);
    --horizontal-margin: 
        calc(
            var(--outside-horizontal-margin, var(--default-outside-horizontal-margin)) 
            + var(--inside-horizontal-margin, var(--default-inside-horizontal-margin))
        );

    --default-grid-row-gap: var(--row-gap);
    --half-row-gap:
        calc(
            var(--grid-row-gap, var(--default-grid-row-gap)) * .5
        );

    --default-grid-left-side:
        [pre-first]
        var(--outside-left-margin, var(--outside-vertical-margin, var(--default-outside-vertical-margin)))
        [first]
        var(--inside-left-margin, var(--inside-vertical-margin, var(--default-inside-vertical-margin)))
        [pos-first]
    ;

    --default-division-core: 
        repeat(calc(var(--divisions, var(--default-divisions)) - 1),
            1fr
            [pre-middle]
            minmax(0, var(--half-middle-gap))
            [middle]
            minmax(0, var(--half-middle-gap))
            [pos-middle]
            1fr
            [pre-division]
            minmax(0, var(--half-gap))
            [division]
            minmax(0, var(--half-gap))
            [pos-division]
        )
        1fr
        [pre-middle-last]
        minmax(0, var(--half-gap))
        [middle-last]
        minmax(0, var(--half-gap))
        [pos-middle-last]
        1fr
    ;

    --default-grid-right-side:
        [pre-last]
        var(--inside-right-margin, var(--inside-vertical-margin, var(--default-inside-vertical-margin)))
        [last]
        var(--outside-right-margin, var(--outside-vertical-margin, var(--default-outside-vertical-margin)))
        [pos-last]
    ;

    --default-division-structure: 
        var(--grid-left-side, var(--default-grid-left-side))

        var(--division-core, var(--default-division-core))

        var(--grid-right-side, var(--default-grid-right-side))
    ;


    --default-grid-header:
        [pre-first]
        var(--outside-top-margin, var(--outside-horizontal-margin, var(--default-outside-horizontal-margin)))
        [first]
        var(--inside-top-margin, var(--inside-horizontal-margin, var(--default-inside-horizontal-margin)))
        [pos-first]
    ;

    --default-rows-core: 
        repeat(calc(var(--rows, var(--default-rows)) - 1), 
            var(--row-height) 
            [pre-row]
            var(--half-row-gap)
            [row]
            var(--half-row-gap)
            [pos-row]
        )
        var(--row-height)
    ;

    --default-grid-footer:
        [pre-last]
        var(--inside-bottom-margin, var(--inside-horizontal-margin, var(--default-inside-horizontal-margin)))
        [last]
        var(--outside-bottom-margin, var(--outside-horizontal-margin, var(--default-outside-horizontal-margin)))
        [pos-last]
    ;
    
    --default-rows-structure:
        var(--grid-header, var(--default-grid-header))

        var(--rows-core, var(--default-rows-core))

        var(--grid-footer, var(--default-grid-footer))
    ;

    display: grid;
    grid-template-columns: var(--division-structure, var(--default-division-structure));
    grid-template-rows: var(--rows-structure, var(--default-rows-structure));

    grid-auto-rows: var(--row-height);
}

.grid.collapsed
{
    --outside-vertical-margin: 0;
    --inside-vertical-margin: 0;
    --outside-horizontal-margin: 0;
    --inside-horizontal-margin: 0;
    --gap: 0;
}
.grid.mono{ --division-core: auto; }
.grid.duo{ --divisions: 2; }
.grid.tri{ --divisions: 3; }
.grid.tetra{ --divisions: 4; }
.grid.penta{ --divisions: 5; }
.grid.hexa{ --divisions: 6; }
.grid.octa{ --divisions: 8; }

/* // FRAMED // */

.framed
{
    --left-gap: var(--page-margin);
    --right-gap: var(--page-margin);
    --top-gap: var(--display-gap);
    --bottom-gap: var(--display-gap);
    padding: var(--top-gap) var(--right-gap) var(--bottom-gap) var(--left-gap);
}

.framed.horizontal
{
    --top-gap: 0;
    --bottom-gap: 0;
}

.framed.vertical
{
    --left-gap: 0;
    --right-gap: 0;
}



@media (max-width: 1280px) {
    :root{
        --base-size: calc(var(--vw-un) * 1.5);
    }
}

@media (max-width: 960px) {
    :root{
        --base-size: calc(var(--vw-un) * 2);
    }
}

@media (max-width: 480px) {
    :root{
        --base-size: calc(var(--sz-2) * 2);
        --page-margin: var(--vw-hfr);
        --display-gap: var(--vw-fr);
        --column-gap: var(--vw-hfr);
        --row-gap: var(--vw-hfr);
    }

    .grid
    {
        --default-divisions: 3;
    }
}