:root {
    --main-font-size: 24px;
    --max-width: 1960px;
    --margin: 60px;
    --vmargin: 30px;
    --vgutter: 40px;
    --halfvmargin: calc(var(--vmargin) / 2);
    --gutter: calc(var(--margin) * 2 / 3);
    --color-white:#FFFFFF;
    --color-black:#000000;
    --color-scafi-base:#597BB1;
    --color-scafi-base-bright:#5381C6;
    --color-dark-blue:#0E2841;
    --color-dark-light-blue:#142E49;
    --color-red:#E94F35;
    --color-yellow:#FFAD42;
    --color-light-grey:#D6D6D6;
    --color-light-blue:#72ABFF;

    --font-size-big-title: 3rem;
    --font-size-number: 7.5rem;
    --font-size-quote: 3rem;
    --font-size-subhead: 1.58rem;
    --font-size-title: 1.58rem;
    --font-size-text: 1rem;
    --font-size-text-link: 1rem;
    --font-size-text-title: 1rem;
    --font-size-subtext: 0.58rem;
    --font-size-subtext-link: 0.58rem;
    --font-size-subtext-bold: 0.58rem;
    --font-size-small-caps: 0.58rem;
    --font-size-big-icon: 1.33rem;
    --font-size-small-icon: 0.66rem;

    --font-weight-number: 100;
    --font-weight-text: 300;
    --font-weight-book: 400;
    --font-weight-small-caps: 400;
    --font-weight-bold:800;
    --font-weight-title:800;

    --letter-spacing-small-caps: 0.05em;

    --col-w: calc((100% + var(--gutter)) / 12);
}
@function --col-width(--number) {
  result: calc((var(--number) * var(--col-w)) - var(--gutter));
}
@function --col-margin(--number) {
  result: calc(var(--number) * var(--col-w));
}

@media (max-width: 768px) {
  :root {
    --main-font-size: 18px;
    --max-width: 1960px;
    --margin: 20px;
    /*--vmargin: 30px;*/
    --vmargin: 20px;
    --vgutter: 20px;
    --gutter: 20px;

    --font-size-big-title: 2rem;
    --font-size-number: 4.7rem;
    --font-size-quote: 2.1rem;
    --font-size-subhead: 1.55rem;
    --font-size-title: 1.55rem;
    --font-size-text: 1rem;
    --font-size-text-link: 1rem;
    --font-size-text-title: 1rem;
    --font-size-subtext: 0.7rem;
    --font-size-subtext-link: 0.7rem;
    --font-size-subtext-bold: 0.7rem;
    --font-size-small-caps: 0.7rem;
    /*
    --font-size-subtext: 0.58rem;
    --font-size-subtext-link: 0.58rem;
    --font-size-subtext-bold: 0.58rem;
    --font-size-small-caps: 0.58rem;
    */
    --font-size-big-icon: 1.33rem;
    --font-size-small-icon: 0.66rem;

    --font-weight-number: 100;
    --font-weight-text: 300;
    --font-weight-book: 400;
    --font-weight-small-caps: 400;
    --font-weight-bold:800;
    --font-weight-title:800;

    --letter-spacing-small-caps: 0.05em;
  }    
}
@media (min-width: 769px) and (max-width: 1280px) {
    :root {
        --main-font-size: 18px;
        --margin: 40px;
        --gutter: 20px;
        --vmargin: 20px;
        --vgutter: 20px;
        --font-size-subtext: 0.7rem;
        --font-size-subtext-link: 0.7rem;
        --font-size-subtext-bold: 0.7rem;
        --font-size-small-caps: 0.7rem;
    } 
}