@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wdth,wght,YTAS,YTDE,YTFI,YTLC,YTUC@110,100,725,-250,725,500,725;110,300,725,-250,725,500,725;110,500,725,-250,725,500,725;110,700,725,-250,725,500,725&display=swap');

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


:root {

    --roboto-em-size-ratio: 2.048;
    --roboto-capitular-ratio: 1.456;
    --roboto-baseline-threshold: 0.015;
    --roboto-size-ratio: calc(var(--roboto-em-size-ratio) / var(--roboto-capitular-ratio));

    --f-light: 100;
    --f-regular: 300;
    --f-medium: 500;
    --f-bold: 700;

    --esl: 'emblematic-soft-linear';
    --esl-baseline-threshold: 0;
    --esl-size-ratio: 1;

    --grid-division: 16;

    --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);

    --t-fr: calc(var(--fr) * 60s);
    --t-hfr: calc(var(--hfr) * 60s);
    --t-trd:  calc(var(--trd) * 60s);
    --t-qt: calc(var(--qt) * 60s);
    --t-htrd:  calc(var(--htrd) * 60s);
    --t-hqt:  calc(var(--hqt) * 60s);
    --t-un: calc(var(--un) * 60s);

    --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-sx: calc(var(--sz-1) * 0.6666666667);
    --sz-1: var(--vw-un);
    --sz-1trd:  calc(var(--sz-1) * 1.33333333);
    --sz-1h: calc(var(--sz-1) * 1.5);
    --sz-2: calc(var(--sz-1) * 2);
    --sz-2h: calc(var(--sz-1) * 2.5);
    --sz-2sx: calc(var(--sz-1) * 2.6666666667);
    --sz-3: calc(var(--sz-1) * 3);
    --sz-3trd: calc(var(--sz-1trd) * 2.5);
    --sz-4: calc(var(--sz-1) * 4);
    --sz-5: calc(var(--sz-1) * 5);
    --sz-5trd: calc(var(--sz-2sx) * 2);
    --sz-6: calc(var(--sz-1) * 6);
    --sz-6sx: calc(var(--sz-3trd) * 2);
    --sz-8: calc(var(--sz-1) * 8);
    --sz-10sx: calc(var(--sz-5trd) * 2);
    --sz-12: calc(var(--sz-1) * 12);
    --sz-16: calc(var(--sz-1) * 16);
    --sz-21trd: calc(var(--sz-10sx) * 2);

    --line-gap-ratio: 1;

    --white: rgb(255,255,255);
    --gray-01: rgb(250,245,245);
    --gray-02: rgb(205,200,200);
    --gray-03: rgb(125,120,120);
    --black: rgb(55,45,45);
    --red: rgb(236,50,50);
    --yellow: rgb(255,155,80);
    --green: rgb(92,178,81);
    --blue: rgb(0,185,230);

    --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(--sz-2);
    --page-margin: var(--vw-fr);
    --display-gap: var(--vw-fr);
    --row-gap: var(--vw-hfr);
    --column-gap: var(--vw-fr);

    --shadow-01: 0 7.5px 75px -7.5px rgba(0,0,0,.1);
}


* {

    --font-size: var(--base-size);

    /* Set */
    --line-gap: var(--line-gap-ratio);
    --font-size-ratio: var(--roboto-size-ratio);
    --baseline-threshold: var(--roboto-baseline-threshold);
    /* --lead-ratio para definir a distância entre os textos */

    /* Get */
    --adjusted-font-size: calc(var(--font-size) * var(--font-size-ratio));
    --baseline-adjustment: calc(var(--font-size) * var(--baseline-threshold));
    --line-height: calc(var(--font-size) * (var(--line-gap) + 1));
    --bound-adjustment: calc((var(--font-size) * (var(--line-gap) * -.5)) + var(--baseline-adjustment));
    --bound-retraction: calc((var(--bound-adjustment) - var(--baseline-adjustment)) * 2);
    --lead: calc(var(--font-size) * (var(--lead-ratio) + 1));

    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;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: none;
    line-height: var(--line-height);
    background: 0 0;
    position: relative;
}

body {
    width: 100%;
    display: block;
    font-size: var(--adjusted-font-size);
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    font-family: 'Roboto Flex', Arial, Helvetica, sans-serif;
}

.wrap
{
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-bottom: var(--vw-qt);
    margin-bottom: calc(var(--vw-qt) * -1);
    min-height: 100vh;
    box-sizing: border-box;
}

::-webkit-input-placeholder {
    opacity: 1;
}
::-moz-placeholder {
    opacity: 1;
}
:-ms-input-placeholder {
    opacity: 1;
}

/* ===== SISTEMA DE CALIBRAGEM ===== */

.grid-text,
.grid-chess,
.grid-columns
{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1000;
}

.grid-text
{
    /* SET */
    --text: var(--text-unit);
    --color: rgba(30,120,255);

    --height-ratio: 1;
    --line-text-ratio: 0.5;

    /* GET */
    --grid-height: calc((var(--text) * 2) * var(--height-ratio));

    opacity: .2;
    width: 100%;
    background-image:
        linear-gradient(var(--color) calc(var(--line-text-ratio) * 100%), transparent 0%);
    background-size:
        100% var(--grid-height);
}

.grid-text .baliza{
    background-color: var(--color);
    height: var(--text);
}

.grid-text.lhc-15
{
    --height-ratio: 1.25;
    --line-text-ratio: 0.4;
}
.grid-text.lhc-12
{
    --height-ratio: 1.125;
    --line-text-ratio: 0.44444444;
}
.grid-text.lhc-1
{
    --height-ratio: 1;
    --line-text-ratio: 0.5;
}
.grid-text.lhc-075
{
    --height-ratio: 0.875;
    --line-text-ratio: 0.5714285714;
}
.grid-text.lhc-05
{
    --height-ratio: 0.75;
    --line-text-ratio: 0.6666666667;
}


.grid-chess{

    opacity: 0.12;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect x='0' y='0' width='1' height='1'/><rect x='1' y='1' width='1' height='1' fill='black'/></svg>");
    background-size: calc(var(--grid-unit) * 2) calc(var(--grid-unit) * 2);
}

.grid-chess.un{ --grid-unit: var(--vw-un); }
.grid-chess.hqt{ --grid-unit: var(--vw-hqt); }
.grid-chess.qt{ --grid-unit: var(--vw-qt); }
.grid-chess.hfr{ --grid-unit: var(--vw-hfr); }
.grid-chess.fr{ --grid-unit: var(--vw-fr); }

.grid-columns
{
    --color: rgb(255, 0, 200);
    opacity: 0.2;
    background-image: linear-gradient(90deg, var(--color) 50%, transparent 0%);
    background-size: calc(100% / (var(--grid-division) * .5)) 100%;
}


/* ===== SISTEMA PRINCIPAL DE TEXTO E GRID ===== */


.baseline, .baseline-childs > *{
    line-height: var(--line-height);
    transform: translateY(var(--bound-adjustment));
    margin-bottom: var(--bound-retraction);
}
.baseline.lh-15, .baseline-childs.lh-15 > *{ --line-gap: 1.5; }
.baseline.lh-12, .baseline-childs.lh-12 > *{ --line-gap: 1.25; }
.baseline.lh-1, .baseline-childs.lh-1 > *{ --line-gap: 1; }
.baseline.lh-075, .baseline-childs.lh-075 > *{ --line-gap: .75; }
.baseline.lh-05, .baseline-childs.lh-05 > *{ --line-gap: 0.5; }
.baseline.lh-0, .baseline-childs.lh-0 > *{ --line-gap: 0; }

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

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


.italic{ font-style: italic;}
.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); }

.upper{ text-transform: uppercase; }

/* // COLOR SCHEMES // */
.scheme-01
{
    --foreground: var(--white);
    --background: var(--red);
}

.scheme-02
{
    --foreground: var(--red);
    --background: var(--white);
}

/* // SHADOWS // */
.shadow-01{ box-shadow: 0 15px 45px -7.5px rgba(0,0,0,.2); }
.shadow-02{ box-shadow: 0 15px 60px -7.5px rgba(0,0,0,.2); }


/* ==== RECURSOS ==== */

.cover{ z-index: 0;}

.cover::before
{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cover::before
{
    background-size: cover;
    background-position: center;
    background-image: var(--cover-img);
    z-index: 0;
}

.cover.grain::before
{
    filter: contrast(100%) brightness(0%) grayscale(1);
    opacity: .2;
    background-image:
  	url("data:image/svg+xml,<svg width='1080' height='1080' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23noiseFilter)'/></svg>");
}

.cover.solid{ background-color: var(--background); }

.cover.img-01{ --cover-img: url(../../img/covers/cover-01.jpg); }
/* ==== TEXTO ==== */

.title,
p.prph,
li.prph,
.prph > p,
.prph > li
{
    --line-gap: 1;
    --lead-ratio: 1;
    transform: translateY(var(--bound-adjustment));
    margin-bottom: var(--bound-retraction);
    color: var(--foreground);
}

.prph.large > p,
.prph.large > li,
.prph.large{ --font-size: calc(var(--base-size) * 2);}

.prph.p01 > p,
.prph.p01 > li,
.prph.p01{ --font-size: calc(var(--base-size) * .75);}

.prph.p02 > p,
.prph.p02 > li,
.prph.p02
{
    --font-size: var(--base-size);
    font-weight: var(--f-regular);
}
.prph.p03 > p,
.prph.p03 > li,
.prph.p03
{
    --font-size: calc(var(--base-size) * .75);
}


.title
{
    font-weight: var(--f-bold);
}
.title.t01
{
    --font-size: calc(var(--base-size) * 4);
}
.title.t02
{
    --font-size: calc(var(--base-size) * 3);
}
.title.t03
{
    --font-size: calc(var(--base-size) * 2);
}
.title.display
{
    --font-size: calc(var(--base-size) * 6);
}


.title + .prph,
.prph + .prph,
.prph > p + p,
.prph > .title + p,
.prph > p + .prph,
.prph > li + li,
.prph > li + .prph
{
    margin-top: var(--lead);
}

ul.marker{ list-style: none; }

.marker:not(ul),
ul.marker > li
{
    --icon-size: calc(var(--base-size) * 1.25);
    --icon-gap: var(--vw-un);
    --total-gap: calc(var(--icon-size) + var(--icon-gap));
}
.marker:not(ul):not(.sample),
ul.marker:not(.sample) > li
{
    padding-left: var(--total-gap);
}

.marker:not(ul)::before,
ul.marker > li::before
{
    content: var(--marker);
    font-family: var(--esl);
    display: inline-block;
    margin-right: var(--icon-gap);
    font-size: var(--icon-size);
}
.marker:not(ul):not(.sample)::before,
ul.marker:not(.sample) > li::before
{
    margin-left: calc(var(--total-gap) * -1);
}

.marker:not(ul).retracted,
ul.marker.retracted > li{ padding-left: 0; }
.marker:not(ul).sample.retracted,
ul.marker.sample.retracted > li{ margin-left: calc(var(--total-gap) * -1); }

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

ul.listing > li
{
    display: block;
    transition: font-weight var(--t-un) var(--ease-cubic);
    cursor: default;
}

ul.listing > li:hover{ font-weight: var(--f-bold); }

.signature span{ font-size: var(--sz-3); }

/* ==== ELEMENTOS ==== */

/* // BUTTONS // */
.button{
    --button-foreground: var(--foreground);
    --button-background: var(--background);
    --resize-rate: 1;
    --fz: var(--base-size);
    display: block;
    z-index: 1;
    transition: all 0.25s var(--ease-cubic);
    width: max-content;
}

.button.small{ --resize-rate: .75; }

.button.max-width{ width: 100%; }

.button [tabindex]
{
    display: block;
    transition: inherit;
}

.button.rounded
{
    border-radius: 100px;
}

button.button,
.button [tabindex]
{
    --font-size: calc(var(--fz) * var(--resize-rate));
    padding: calc(var(--base-size) * .5) calc(var(--base-size) * 2);
    border-radius: calc(var(--base-size) * .5);
    color: var(--foreground);
    font-weight: var(--f-medium);
    overflow: hidden;
    cursor: pointer;
}

.button .icon{ font-size: var(--font-size); }
.button .icon.left{ margin-right: var(--font-size); }
.button .icon.right{ margin-left: var(--font-size); }


button.button::after,
button.button::before,
.button [tabindex]::after,
.button [tabindex]::before
{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    box-sizing: border-box;
    border-radius: inherit;
    transition: inherit;
}

button.button::after,
.button [tabindex]::after
{
    border: 2px solid var(--button-foreground);
}

button.button::before,
.button [tabindex]::before
{
    opacity: 0;
    background-color: var(--button-foreground);
}

button.button:hover,
button.button:focus,
.button:hover [tabindex],
.button [tabindex]:focus
{
    color: var(--button-background);
}

button.button:hover::before,
button.button:focus::before,
.button:hover [tabindex]::before,
.button [tabindex]:focus::before
{
    opacity: 1;
}

button.button.fill,
.button.fill [tabindex]
{
    color: var(--button-background);
}

button.button.fill::after,
.button.fill [tabindex]::after
{
    border: none;
}

button.button.fill::before,
.button.fill [tabindex]::before
{
    opacity: 1;
}

button.button.fill:hover,
button.button.fill:focus,
.button.fill:hover [tabindex],
.button.fill [tabindex]:focus
{
    color: var(--button-foreground);
}

button.button.fill:hover::before,
button.button.fill:focus::before,
.button.fill:hover [tabindex]::before,
.button.fill [tabindex]:focus::before
{
    background-color: var(--button-background);
}

button.button.fill.dusk,
.button.fill.dusk [tabindex]
{
    color: var(--button-foreground);
}
button.button.fill.dusk::after,
.button.fill.dusk [tabindex]::after
{
    background: #000;
    opacity: 0;
}

button.button.fill.dusk::before,
.button.fill.dusk [tabindex]::before
{
    opacity: 1;
    background-color: var(--button-background);
}

button.button.fill.dusk:hover::after,
button.button.fill.dusk:focus::after,
.button.fill.dusk:hover [tabindex]::after,
.button.fill.dusk [tabindex]:focus::after
{
    opacity: .2;
}

a.sample [tabindex]
{
    font-size: inherit;
}

a.sample [tabindex],
button.sample
{
    --button-foreground: var(--foreground);
    --button-background: var(--background);
    color: inherit;
    transition: color .2s linear;
}

a.sample:hover [tabindex],
button.sample:hover,
a.sample [tabindex]:focus,
button.sample:focus
{
    color: var(--button-foreground);
}

/* // LOGO // */
.logo{ --height-ratio: 1; }
.logo > .img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
}

.logo::before
{
    content: '';
    display: block;
    width: 100%;
    padding-bottom: calc(100% * var(--height-ratio));
}

.logo.faep{ --height-ratio: 0.7716535433; }

/* // FORMULÁRIO // */
.field-group
{
    --support-base-size: var(--base-size);
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--support-base-size) * -.5);
    margin-right: calc(var(--support-base-size) * -.5);
    margin-bottom: calc(var(--support-base-size) * -1);
}

.field-support,
.button-support
{
    box-sizing: border-box;
    padding-left: calc(var(--support-base-size) * .5);
    padding-right: calc(var(--support-base-size) * .5);
    margin-bottom: var(--support-base-size);
}

.field-group .error:empty{ display: none; }
.field-group .error,
.field-group .message
{
    --font-size: calc(var(--base-size) * .75);
    width: 100%;
    color: var(--red);
    margin-left: calc(var(--support-base-size) * .5);
    margin-right: calc(var(--support-base-size) * .5);
}
.field-group .error::before,
.field-group .message::before
{
    content: '\e0b0';
    font-family: var(--esl);
    font-size: var(--base-size);
    margin-right: var(--base-size);
}

.field-group .message{ color: var(--gray-03); }
.field-group .message > a{ font-size: inherit; }

.button-support{ margin-top: calc(var(--support-base-size) * 1); }

.field-support.full{ width: 100%; }
.field-support.three-quart{ width: 75%; }
.field-support.two-third{ width: 66.6666666%; }
.field-support.halph{ width: 50%; }
.field-support.third{ width: 33.3333333%; }
.field-support.quart{ width: 25%; }
.field-support.quint{ width: 20%; }

.text-field
{
    background-color: var(--gray-01);
    padding: calc(var(--font-size) * .5) var(--font-size);
    border-radius: calc(var(--base-size) * .5);
    box-sizing: border-box;
    width: 100%;
    color: var(--black);
    font-weight: var(--f-medium);
}


/* // CONTROLES DE VALIDAÇÃO // */

.hint-button,
.message-display
{
    --square: 25px;
    background-color: #fa5055;
    color: #fff;
    box-shadow: 0 5px 12px -2px rgba(0,0,0,.2);
}

.hint-button
{
    --lens-opacity: .25;
    opacity: 0;
    width: var(--square);
    height: var(--square);
    border-radius: 50%;
    cursor: pointer;
    transition: all 2s linear;
    overflow: hidden;
    position: absolute;
    top: calc(50% - 12.5px);
    margin: 0 calc(var(--support-base-size) * 1.25);
    right: 0;
    transition: opacity .2s linear;
    pointer-events: none;
}

.hint-button.show{
    opacity: 1;
    pointer-events: auto;
}

.hint-button::before,
.hint-button::after
{
    font-family: var(--esl);
    font-size: 15px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding-top: 3px;
    width: 100%;
    line-height: 1;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    transition:
        background-color 0.2s linear,
        left 0.25s var(--ease-cubic);
}

.hint-button::before
{
    content: '\e0b0';
    left: 0;
}
.hint-button::after
{
    padding-top: 5px;
    content: '\e0b8';
    left: 100%;
}

.hint-button:hover::before,
.hint-button:focus::before,
.hint-button:hover::after,
.hint-button:focus::after
{
    background-color: rgba(0,0,0,var(--lens-opacity));
}

.hint-button[aria-expanded='true']::before{ left: -100%; }
.hint-button[aria-expanded='true']::after{ left: 0; }


.message-display
{
    --font-size: calc(var(--base-size) * .75);
    --line-gap: 1;
    border-radius: 3px;
    font-weight: var(--f-medium);
    padding: calc(var(--font-size) * .5) var(--font-size);
    box-sizing: border-box;
    /* max-width: calc(100% - var(--base-size)); */
    position: absolute;
    z-index: 2;
    pointer-events: none;
    transform: translateY(0);
    bottom: 0;
    margin-right: calc(var(--square) + (var(--base-size) * 2));
    opacity: 0;
    transition: all 0.25s var(--ease-quart);
}

.message-display.show
{
    transform: translateY(75%);
    opacity: 1;
}

/* ==== COMPONENTES ==== */




/* ==== ESTRUTURAS ==== */

.frame
{
    grid-template-rows:
        [pre-first]
        calc(var(--display-gap) * .5)
        [first]
        calc(var(--display-gap) * .5)
        [pos-first]
        repeat(6, auto)
        [pre-last]
        calc(var(--display-gap) * .5)
        [last]
        calc(var(--display-gap) * .5)
        [pos-last]
    ;
}

.frame.base-3
{
    --ornament-radius: var(--vw-qt);
    display: grid;
    grid-template-columns:
        [pre-first]
        calc(var(--page-margin) * .5)
        [first]
        calc(var(--page-margin) * .5)
        [pos-first]
        1fr
        [pre-second]
        calc(var(--column-gap) * .5)
        [second]
        calc(var(--column-gap) * .5)
        [pos-second]
        1fr
        [pre-third]
        calc(var(--column-gap) * .5)
        [third]
        calc(var(--column-gap) * .5)
        [pos-third]
        1fr
        [pre-last]
        calc(var(--page-margin) * .5)
        [last]
        calc(var(--page-margin) * .5)
        [pos-last]
    ;
}

.frame.base-4
{
    --ornament-radius: var(--vw-qt);
    display: grid;
    grid-template-columns:
        [pre-first]
        calc(var(--page-margin) * .5)
        [first]
        calc(var(--page-margin) * .5)
        [pos-first]
        1fr
        [pre-second]
        calc(var(--column-gap) * .5)
        [second]
        calc(var(--column-gap) * .5)
        [pos-second]
        1fr
        [pre-third]
        calc(var(--column-gap) * .5)
        [third]
        calc(var(--column-gap) * .5)
        [pos-third]
        1fr
        [pre-fourth]
        calc(var(--column-gap) * .5)
        [fourth]
        calc(var(--column-gap) * .5)
        [pos-fourth]
        1fr
        [pre-last]
        calc(var(--page-margin) * .5)
        [last]
        calc(var(--page-margin) * .5)
        [pos-last]
    ;
}
.frame.base-5
{
    --ornament-radius: var(--vw-qt);
    display: grid;
    grid-template-columns:
        [pre-first]
        calc(var(--page-margin) * .5)
        [first]
        calc(var(--page-margin) * .5)
        [pos-first]
        1fr
        [pre-second]
        calc(var(--column-gap) * .5)
        [second]
        calc(var(--column-gap) * .5)
        [pos-second]
        1fr
        [pre-third]
        calc(var(--column-gap) * .5)
        [third]
        calc(var(--column-gap) * .5)
        [pos-third]
        1fr
        [pre-fourth]
        calc(var(--column-gap) * .5)
        [fourth]
        calc(var(--column-gap) * .5)
        [pos-fourth]
        1fr
        [pre-fifth]
        calc(var(--column-gap) * .5)
        [fifth]
        calc(var(--column-gap) * .5)
        [pos-fifth]
        1fr
        [pre-last]
        calc(var(--page-margin) * .5)
        [last]
        calc(var(--page-margin) * .5)
        [pos-last]
    ;
}


/* // START SCREEN // */
#StartScreen,
#ListScreen
{
    background-color: var(--gray-01);
}

#StartScreen > #ConsultationForm
{
    grid-column: 6/10;
    grid-row: pos-first / pre-last;
    align-self: center;
    background-color: var(--white);
    padding: calc(var(--page-margin) * .5);
    border-radius: 7.5px;
    box-shadow: var(--shadow-01);
}

#StartScreen > #ConsultationForm .logo
{
    width: var(--grd-1);
    margin-bottom: calc(var(--row-gap) * .5);
}

#StartScreen > #ConsultationForm .presentation{ color: var(--gray-03); }

#StartScreen > #ConsultationForm .field-group
{
    margin-top: var(--row-gap);
}

/* // LIST SCREEN // */
#ListScreen > header
{
    grid-column: pos-first / pre-last;
    grid-row: first / 4;
    align-self: start;
    color: var(--gray-03);
}

#ListScreen > header .logo
{
    width: var(--grd-1);
}

#ListScreen > header .prph
{
    margin-left: calc(var(--base-size) * -1);
    margin-right: calc(var(--base-size) * -1);
}
#ListScreen > header .prph,
#ListScreen > header .prph span
{
    --font-size: calc(var(--base-size) * 1.5);
    text-transform: uppercase;
    display: inline-block;
}
#ListScreen > header .prph span{
    margin-left: var(--base-size);
    margin-right: var(--base-size);
}

#ListScreen > .list-display
{
    grid-column: pos-first / pre-last;
    grid-row: 4 / pre-last;
    align-self: start;
    margin-top: var(--row-gap);
}

#ListScreen .diploma
{
    padding: calc(var(--base-size) * 2.5);
    background-color: var(--white);
    border-radius: calc(var(--base-size) * .5);
    box-shadow: var(--shadow-01);
    display: flex;
    flex-wrap: wrap;
    margin-bottom: calc(var(--base-size) * 2);
}

#ListScreen .diploma > p
{
    --font-size: calc(var(--base-size) * .75);
    color: var(--gray-03);
    border: 2px solid var(--gray-02);
    border-radius: 5px;
    padding: calc(var(--base-size) * .5) var(--base-size);
    margin: calc(var(--base-size) * .5);
}

#ListScreen .diploma > p span{ font-size: inherit; }

@media (max-width: 1280px) {
    :root{
        --base-size: var(--sz-2h);
    }
}

@media (max-width: 1024px) {
    :root{
        --base-size: var(--sz-3);
    }
}

@media (max-width: 800px) {
    :root{
        --base-size: var(--sz-4);
    }

    #StartScreen > #ConsultationForm
    {
        grid-column: pos-first / pre-last;
    }

    #StartScreen > #ConsultationForm .logo
    {
        width: var(--grd-2);
        margin-bottom: var(--row-gap);
    }

    #ListScreen > header .logo{ width: var(--grd-2); }

    #ListScreen > header{ grid-column: first / last; }
    #ListScreen > .list-display{ grid-column: first / last; }
}

@media (max-width: 768px) {
    :root{
        --grid-division: 12;
    }
}

@media (max-width: 640px) {
    :root{
        --grid-division: 10;
        --base-size: var(--sz-3trd);
    }
    #ListScreen > header .prph,
    #ListScreen > header .prph span{ --font-size: calc(var(--base-size) * 1.25);}
    #ListScreen .diploma{ padding: calc(var(--base-size) * 1.25);}
}

@media (max-width: 540px) {
    :root{
        --base-size: var(--sz-4);
    }
}

@media (max-width: 480px) {
    :root{
        --grid-division: 8;
    }

    #ListScreen > header .prph,
    #ListScreen > header .prph span{ --font-size: calc(var(--base-size) * 1);}
}

@media (max-width: 360px) {
    :root{
        --base-size: var(--sz-5);
    }


    #StartScreen > #ConsultationForm
    {
        grid-column: first / last;
    }

    #StartScreen > #ConsultationForm .logo
    {
        width: var(--grd-3);
        margin-bottom: var(--row-gap);
    }
}

@media (max-width: 240px) {
    :root{
        --base-size: var(--sz-6);
    }

    #StartScreen > #ConsultationForm
    {
        grid-column: first / last;
    }
}