*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

@import url("https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

body {
    background-color          : var(--color-body-bg);
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust  : 100%;
    -webkit-font-smoothing    : antialiased;
    -moz-osx-font-smoothing   : grayscale;
    font-family: var(--font-1);
    font-size  : var(--base-font-size);
    font-weight: 400;
    line-height: var(--vspace-1);
    color      : var(--color-text);
}

.row {
    display  : flex;
    flex-flow: row wrap;
    width    : min(92%, var(--width-grid-max));
    margin   : 0 auto;
}

.row .row {
    width       : auto;
    margin-left : calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}

.column {
    flex   : 1;
    padding: 0 var(--gutter);
}

.collapse>.column,
.column.collapse {
    padding: 0;
}

html {
    font-size : var(--base-size);
    box-sizing: border-box;
}

p {
    font-size     : inherit;
    text-rendering: optimizeLegibility;
}

a {
    text-decoration: none;
}

svg,
img,
video {
    max-width: 100%;
    height   : auto;
}

.u-screen-reader-text {
    clip             : rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path        : inset(50%);
    height           : 1px;
    width            : 1px;
    margin           : -1px;
    overflow         : hidden;
    padding          : 0;
    border           : 0;
    position         : absolute;
    word-wrap        : normal !important;
}

a {
    color     : var(--color-link);
    transition: all 0.3s ease-in-out;
}

a:focus,
a:hover,
a:active {
    color: var(--color-link-hover);
}

a:hover,
a:active {
    outline: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-2);
    font-weight: 400;
    color: var(--color-text-dark);
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
}

h1,
.h1 {
    margin-top   : var(--vspace-2_5);
    margin-bottom: var(--vspace-0_75);
}

h2,
.h2,
h3,
.h3,
h4,
.h4 {
    margin-top   : var(--vspace-2);
    margin-bottom: var(--vspace-0_75);
}

h5,
.h5,
h6,
.h6 {
    margin-top   : var(--vspace-1_75);
    margin-bottom: var(--vspace-0_5);
}

h1,
.h1 {
    font-size     : var(--text-display-2);
    line-height   : calc(2.25 * var(--space));
    letter-spacing: -0.02em;
}

h2,
.h2 {
    font-size     : var(--text-xxl);
    line-height   : calc(1.375 * var(--space));
    letter-spacing: -0.02em;
}

h3,
.h3 {
    font-size  : var(--text-xl);
    line-height: calc(1.125 * var(--space));
}

h4,
.h4 {
    font-size  : var(--text-lg);
    line-height: var(--vspace-1);
}

h5,
.h5 {
    font-size  : var(--text-md);
    line-height: var(--vspace-0_875);
}

h6,
.h6 {
    font-family   : var(--font-1);
    font-weight   : 600;
    font-size     : var(--text-sm);
    line-height   : var(--vspace-0_75);
    text-transform: uppercase;
    letter-spacing: 0.25rem;
}

.btn,
button,
input[type=submit],
input[type=reset],
input[type=button] {
    --btn-height           : var(--vspace-btn);
    display                : inline-block;
    font-family            : var(--font-1);
    font-weight            : 500;
    font-size              : calc(var(--text-size) * 0.6);
    text-transform         : uppercase;
    letter-spacing         : 0.3em;
    height                 : var(--btn-height);
    line-height            : calc(var(--btn-height) - 4px);
    padding                : 0 3.6rem;
    margin                 : 0 0.4rem var(--vspace-0_5) 0;
    color                  : var(--color-btn-text);
    text-decoration        : none;
    text-align             : center;
    white-space            : nowrap;
    cursor                 : pointer;
    transition             : all 0.3s;
    background-color       : var(--color-btn);
    border                 : 2px solid var(--color-btn);
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.width-sixteen-col {
    --width-grid-max: var(--width-sixteen-cols);
}

.width-narrower {
    --width-grid-max: var(--width-narrower);
}

.text-body-sm {
    font-size  : calc(var(--text-size) * 0.95);
    line-height: calc(0.9375 * var(--space));
}

.text-pretitle {
    font-family   : var(--font-1);
    font-weight   : 600;
    font-size     : var(--text-size);
    line-height   : var(--vspace-1);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color         : var(--color-1);
    transform     : translate(0.2em, 0);
    margin-top    : 0;
}

.text-display-title {
    font-size     : var(--text-display-1);
    line-height   : 1.0717;
    letter-spacing: -0.015em;
    margin-top    : 0;
    margin-bottom : var(--vspace-1_5);
}

.section-header {
    display      : flex;
    align-items  : flex-start;
    margin-bottom: var(--vspace-3_5);
    position     : relative;
}

.section-header .text-display-title {
    padding-top  : 0.5em;
    margin-bottom: 0;
    position     : relative;
}

.section-header::before {
    content       : attr(data-num);
    font-family   : var(--font-1);
    font-weight   : 600;
    font-size     : 10em;
    letter-spacing: -0.05em;
    line-height   : 1;
    color         : var(--color-gray-11);
    margin-right  : var(--vspace-0_5);
    position      : absolute;
    top           : -0.25em;
    left          : -0.1em;
    opacity       : 0.5;
}

.section-header.light-on-dark .text-display-title {
    color: white;
}

.section-header.light-on-dark::before {
    color: rgba(255, 255, 255, 0.15);
}

.social-list {
    display    : flex;
    align-items: center;
    list-style : none;
    margin     : 0;
}

.social-list li {
    padding-left: 0;
    margin-right: 0.8rem;
}

.glightbox-container a {
    font-weight  : 500 !important;
    color        : var(--color-1);
    border-bottom: 1px dotted var(--color-1);
}

.glightbox-container .gslide-inner-content {
    width      : min(100%, 1050px);
    padding-top: 10vh;
}

.glightbox-container .gslide-description {
    background: rgb(0, 0, 0);
    width     : 100%;
    text-align: center;
}

.glightbox-container .gdesc-inner {
    padding: var(--vspace-1_25) var(--vspace-0_75) var(--vspace-2);
}

.glightbox-container .gslide-title,
.glightbox-container .gslide-desc {
    width : min(100%, 600px);
    margin: 0 auto;
}

.glightbox-container .gslide-title {
    font-family  : var(--font-1);
    font-weight  : 400;
    font-size    : 1.7rem !important;
    color        : white;
    margin-top   : 0;
    margin-bottom: var(--vspace-0_375);
}

.glightbox-container .gslide-desc {
    font-family: var(--font-1);
    font-weight: 300;
    font-size  : 1.4rem;
    line-height: 1.571;
    color      : rgba(255, 255, 255, 0.5) !important;
}

.glightbox-container .gprev,
.glightbox-container .gnext,
.glightbox-container .gclose {
    margin : 0;
    padding: 0;
}

.glightbox-container .gprev svg,
.glightbox-container .gnext svg,
.glightbox-container .gclose svg {
    width: 24px;
}

.glightbox-container .goverlay {
    background: #000;
}

.glightbox-mobile .gslide-inner-content {
    padding-top: 0;
}

.glightbox-mobile .glightbox-container .gslide-desc a,
.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
    color: var(--color-link);
}

.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
    opacity: 1;
}

.grid-list-items {
    --gap                : calc(var(--gutter) * 2);
    --min-width          : 300px;
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-width), 100%), 1fr));
    -moz-column-gap      : var(--gap);
    column-gap           : var(--gap);
}

.grid-list-items__item {
    margin-bottom: var(--vspace-1);
}

.s-intro {
    --content-padding-top   : max(20rem, 18vh);
    --content-padding-bottom: 22rem;
    --content-min-height    : calc(var(--vspace-1) * 27);
    z-index                 : 2;
    background-color        : var(--color-gray-10);
    width                   : 100%;
    height                  : max(var(--content-min-height), 100vh);
    overflow                : hidden;
    position                : relative;
}

.s-intro__content {
    z-index       : 2;
    align-items   : flex-end;
    height        : 100%;
    padding-top   : var(--content-padding-top);
    padding-bottom: var(--content-padding-bottom);
    position      : relative;
}

.s-intro__content-title {
    font-size     : clamp(3.8rem, 4.8vw, 8.8rem);
    line-height   : 1.045;
    letter-spacing: -0.025em;
    margin-top    : 0;
    margin-bottom : var(--vspace-1_25);
}

.s-intro__content-media {
    position: absolute;
    top     : 0;
    right   : 0;
    bottom  : 0;
    left    : 50%;
}

.s-intro__content-media img {
    z-index       : 2;
    -o-object-fit : cover;
    object-fit    : cover;
    vertical-align: bottom;
    width         : 100%;
    height        : 100%;
    margin        : 0;
    padding       : 0;
}

.s-about {
    padding-top: var(--vspace-7);
    color      : var(--color-3);
}

.s-about__blocks {
    margin-top: var(--vspace-3);
}

.s-about__blocks .s-about__block-title {
    margin-top   : 0;
    margin-bottom: var(--vspace-1);
    padding-left : 1.45rem;
    position     : relative;
}

.s-about__blocks .s-about__block-title::before {
    content         : "";
    height          : 0.7em;
    width           : 3px;
    background-color: var(--color-1);
    transform       : translateY(-50%);
    position        : absolute;
    left            : 0;
    top             : 50%;
}

.s-about__list {
    list-style : none;
    font-size  : calc(var(--text-size) * 1.05);
    margin-left: 0;
}

.s-about__list a {
    color: var(--color-text);
}

.s-about__list li {
    font-weight  : 500;
    margin-bottom: var(--vspace-0_625);
    padding-left : 0;
}

.s-about__list span {
    display    : block;
    font-size  : var(--text-sm);
    font-weight: 300;
    line-height: 1.2;
    color      : var(--color-text-light) !important;
}

.s-works {
    padding-top   : var(--vspace-6);
    padding-bottom: var(--vspace-1);
}


.folio-entries {
    --width-grid-max: 1400px;
    margin-top: var(--vspace-0_5);
}

.folio-entries .entry {
    flex: none;
    width: 50%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.folio-entries .entry__link {
    display: block;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.folio-entries .entry__link img {
    vertical-align: bottom;
    margin: 0;
}

.folio-entries .entry__link::before {
    z-index: 1;
    content: "";
    display: block;
    background-color: var(--color-text-dark);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.folio-entries .entry__info {
    z-index: 2;
    transform: translate(-50%, 100%);
    opacity: 0;
    visibility: hidden;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.folio-entries .entry__cat,
.folio-entries .entry__title {
    font-family: var(--font-1);
}

.folio-entries .entry__cat {
    font-size: calc(var(--text-size) * 0.8);
    line-height: 1.75;
    color: var(--color-gray-15);
}

.folio-entries .entry__title {
    font-weight: 500;
    font-size: var(--text-size);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: var(--vspace-0_125);
    color: white;
}

.folio-entries .entry:hover .entry__link::before,
.folio-entries .entry:focus .entry__link::before {
    opacity: 1;
    visibility: visible;
}

.folio-entries .entry:hover .entry__info,
.folio-entries .entry:focus .entry__info {
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
}


.s-testimonials {
    padding-top   : var(--vspace-4_5);
    padding-bottom: var(--vspace-4);
}

.s-testimonials__header {
    margin-top   : 0;
    margin-bottom: var(--vspace-2);
    text-align   : center;
}

.s-testimonials__author {
    display      : inline-block;
    min-height   : var(--vspace-2);
    margin-bottom: var(--vspace-0_625);
    padding-left : calc(2.25 * var(--space));
    position     : relative;
}

.s-testimonials__avatar {
    width        : var(--vspace-1_75);
    height       : var(--vspace-1_75);
    border-radius: 100%;
    outline      : none;
    position     : absolute;
    top          : 0;
    left         : 0;
}

.s-testimonials__cite span {
    display    : block;
    font-size  : calc(var(--text-size) * 0.75);
    font-weight: 400;
    line-height: var(--vspace-0_5);
    color      : var(--color-text-light);
}

.s-footer {
    --bottom-padding: var(--vspace-2_5);
    background-color: var(--color-3);
    margin-top      : auto;
    padding-top     : var(--vspace-6);
    padding-bottom  : var(--bottom-padding);
    color           : var(--color-gray-15);
}

.s-footer h5 {
    color     : white;
    margin-top: 0;
}

.s-footer__block a {
    color: var(--color-gray-12);
}

.s-footer__block a:focus,
.s-footer__block a:hover {
    color: white;
}

.s-footer__buttons {
    --color-btn-stroke           : white;
    --color-btn-stroke-text      : white;
    --color-btn-stroke-hover     : #5e5f5e;
}

.s-footer__social svg path,
.s-footer__social svg circle {
    fill      : var(--color-gray-15);
    transition: all 0.5s;
}

.s-footer .link-list a {
    color : var(--color-gray-15);
    border: none;
}

.s-footer .link-list a:focus,
.s-footer .link-list a:hover {
    color: white;
}
.ss-copyright a {
    color: var(--color-gray-5);
}

.xl-1 {
    flex : none;
    width: 8.3333333333%;
}

.xl-2 {
    flex : none;
    width: 16.6666666667%;
}

.xl-3 {
    flex : none;
    width: 25%;
}

.xl-4 {
    flex : none;
    width: 33.3333333333%;
}

.xl-5 {
    flex : none;
    width: 41.6666666667%;
}

.xl-6 {
    flex : none;
    width: 50%;
}

.xl-7 {
    flex : none;
    width: 58.3333333333%;
}

.xl-8 {
    flex : none;
    width: 66.6666666667%;
}

.xl-9 {
    flex : none;
    width: 75%;
}

.xl-10 {
    flex : none;
    width: 83.3333333333%;
}

.xl-11 {
    flex : none;
    width: 91.6666666667%;
}

.xl-12 {
    flex : none;
    width: 100%;
}

.btn.btn--primary:focus,
button.btn--primary:focus,
input[type=submit].btn--primary:focus,
input[type=reset].btn--primary:focus,
input[type=button].btn--primary:focus,
.btn.btn--primary:hover,
button.btn--primary:hover,
input[type=submit].btn--primary:hover,
input[type=reset].btn--primary:hover,
input[type=button].btn--primary:hover {
    background  : var(--color-btn-primary-hover);
    border-color: var(--color-btn-primary-hover);
    color       : var(--color-btn-primary-hover-text);
}

.btn.u-fullwidth,
button.u-fullwidth {
    width       : 100%;
    margin-right: 0;
}

.btn--large,
button.btn--large {
    --btn-height: calc(var(--vspace-btn) + 1.6rem);
    font-size   : var(--text-xs);
}

.btn--stroke,
button.btn--stroke {
    background : transparent !important;
    font-weight: 700;
    border     : 2px solid var(--color-btn-stroke);
    color      : var(--color-btn-stroke-text);
}

.btn--stroke:focus,
button.btn--stroke:focus,
.btn--stroke:hover,
button.btn--stroke:hover {
    background: var(--color-btn-stroke-hover) !important;
    border    : 2px solid var(--color-btn-stroke-hover);
    color     : var(--color-btn-stroke-hover-text);
}

@media screen and (max-width: 600px) {
    :root {
        --multiplier: .9375;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --gutter: 2.2rem;
    }
}


@media screen and (max-width: 600px) {
    :root {
        --gutter: 1rem;
    }
}


@media screen and (max-width: 1000px) {
    .md-1 {
        flex : none;
        width: 8.3333333333%;
    }

    .md-2 {
        flex : none;
        width: 16.6666666667%;
    }

    .md-3 {
        flex : none;
        width: 25%;
    }

    .md-4 {
        flex : none;
        width: 33.3333333333%;
    }

    .md-5 {
        flex : none;
        width: 41.6666666667%;
    }

    .md-6 {
        flex : none;
        width: 50%;
    }

    .md-7 {
        flex : none;
        width: 58.3333333333%;
    }

    .md-8 {
        flex : none;
        width: 66.6666666667%;
    }

    .md-9 {
        flex : none;
        width: 75%;
    }

    .md-10 {
        flex : none;
        width: 83.3333333333%;
    }

    .md-11 {
        flex : none;
        width: 91.6666666667%;
    }

    .md-12 {
        flex : none;
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
    .tab-1 {
        flex : none;
        width: 8.3333333333%;
    }

    .tab-2 {
        flex : none;
        width: 16.6666666667%;
    }

    .tab-3 {
        flex : none;
        width: 25%;
    }

    .tab-4 {
        flex : none;
        width: 33.3333333333%;
    }

    .tab-5 {
        flex : none;
        width: 41.6666666667%;
    }

    .tab-6 {
        flex : none;
        width: 50%;
    }

    .tab-7 {
        flex : none;
        width: 58.3333333333%;
    }

    .tab-8 {
        flex : none;
        width: 66.6666666667%;
    }

    .tab-9 {
        flex : none;
        width: 75%;
    }

    .tab-10 {
        flex : none;
        width: 83.3333333333%;
    }

    .tab-11 {
        flex : none;
        width: 91.6666666667%;
    }

    .tab-12 {
        flex : none;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .row {
        width        : 100%;
        padding-left : 6vw;
        padding-right: 6vw;
    }

    .row .row {
        padding-left : 0;
        padding-right: 0;
    }

    .mob-1 {
        flex : none;
        width: 8.3333333333%;
    }

    .mob-2 {
        flex : none;
        width: 16.6666666667%;
    }

    .mob-3 {
        flex : none;
        width: 25%;
    }

    .mob-4 {
        flex : none;
        width: 33.3333333333%;
    }

    .mob-5 {
        flex : none;
        width: 41.6666666667%;
    }

    .mob-6 {
        flex : none;
        width: 50%;
    }

    .mob-7 {
        flex : none;
        width: 58.3333333333%;
    }

    .mob-8 {
        flex : none;
        width: 66.6666666667%;
    }

    .mob-9 {
        flex : none;
        width: 75%;
    }

    .mob-10 {
        flex : none;
        width: 83.3333333333%;
    }

    .mob-11 {
        flex : none;
        width: 91.6666666667%;
    }

    .mob-12 {
        flex : none;
        width: 100%;
    }
}


@media screen and (max-width: 500px) {

    h1,
    .h1 {
        font-size  : var(--text-xxxl);
        line-height: calc(1.625 * var(--space));
    }
}

@media screen and (max-width: 1080px) {
    .s-intro {
        --content-padding-top   : max(12rem, 16vh);
        --content-padding-bottom: 9.6rem;
    }

    .s-intro__content {
        padding-bottom: var(--vspace-0_75);
        align-items   : center;
    }

    .s-intro__content-text {
        grid-column: 1/-1;
        text-align : center;
        max-width  : 70vw;
        margin     : 0 auto;
    }

    .s-intro__content-title {
        font-size: clamp(4.2rem, 8.2vw, 8.8rem);
        color    : white;
    }

    .s-intro__content-title br {
        display: none;
    }

    .s-intro__content-btns {
        --color-btn                  : white;
        --color-btn-text             : var(--color-text-dark);
        --color-btn-hover            : var(--color-1);
        --color-btn-hover-text       : white;
        --color-btn-stroke           : white;
        --color-btn-stroke-text      : white;
        --color-btn-stroke-hover     : white;
        --color-btn-stroke-hover-text: var(--color-text-dark);
        padding-right                : 0;
        max-width                    : 400px;
        margin                       : var(--vspace-1) auto 0;
    }

    .s-intro__content-btns .btn {
        margin-right: 0;
    }

    .s-intro__content-media {
        left: 0;
    }

    .s-intro__content-media::before {
        opacity: 0.2;
    }

    .s-intro__social {
        right: calc(2.4rem + var(--vspace-0_375));
    }

    .s-intro__social svg {
        height: var(--vspace-0_625);
        width : var(--vspace-0_625);
    }

    .s-intro__btn-download {
        --hline-width: 8vw;
        left         : var(--hline-width);
        bottom       : var(--vspace-0_75);
    }

    .s-intro__btn-download .btn--stroke {
        --btn-height: var(--vspace-1_25);
        background  : transparent !important;
        border      : 2px solid transparent;
        padding     : 0 2.4rem;
    }

    .s-intro__btn-download .btn--stroke::before {
        height : 1px;
        opacity: 0.5;
        top    : calc(50% - 1px);
    }

    .s-intro__btn-download .btn--stroke::after {
        content         : "";
        display         : block;
        background-color: var(--color-1);
        height          : 2px;
        width           : 0;
        bottom          : 0;
        left            : 2rem;
        transition      : width 0.2s ease-in-out;
    }

    .s-intro__btn-download .btn--stroke:hover {
        color: white;
    }

    .s-intro__btn-download .btn--stroke:hover::after {
        width: 100%;
    }

    .s-intro__scroll-down {
        bottom: var(--vspace-1);
        right : 2.4rem;
    }

    .s-intro__scroll-down .scroll-icon {
        height: var(--vspace-1_5);
        width : var(--vspace-1_5);
    }
}

@media screen and (max-width: 500px) {
    .folio-entries .entry {
        width: 100%;
    }
}

:root {
    --font-1: "Public Sans", Sans-serif;
    --font-2: "Castoro", Serif;
    --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

:root {
    --color-1: hsla(12, 75%, 45%, 1);
    --color-2: hsla(96, 10%, 19%, 1);
    --color-3: hsla(0, 0%, 10%, 1);
    --color-3-light: hsla(0, 0%, 16%, 1);
    --color-3-dark : hsla(0, 0%, 8%, 1);
    --color-black  : #000000;
    --color-gray-19: #181818;
    --color-gray-18: #2f302f;
    --color-gray-17: #474747;
    --color-gray-16: #5e5f5e;
    --color-gray-15: #767776;
    --color-gray-14: #8e8f8e;
    --color-gray-13: #a5a7a5;
    --color-gray-12: #bdbebd;
    --color-gray-11: #d4d6d4;
    --color-gray-10: #eceeec;
    --color-gray-9 : #eef0ee;
    --color-gray-8 : #f0f1f0;
    --color-gray-7 : #f2f3f2;
    --color-gray-6 : #f4f5f4;
    --color-gray-5 : #f6f7f6;
    --color-gray-4 : #f7f8f7;
    --color-gray-3 : #f9faf9;
    --color-gray-2 : #fbfcfb;
    --color-gray-1 : #fbfcfb;
    --color-white  : #ffffff;
    --color-text       : var(--color-gray-19);
    --color-text-dark  : var(--color-3-dark);
    --color-text-light : var(--color-gray-15);
    --color-placeholder: var(--color-gray-13);
    --color-link       : var(--color-1);
    --color-link-hover : var(--color-2-lighter);
    --color-link-active: var(--color-2-lighter);
    --color-btn                   : var(--color-gray-10);
    --color-btn-text              : var(--color-text);
    --color-btn-hover             : var(--color-gray-11);
    --color-btn-hover-text        : var(--color-text);
    --color-btn-primary           : var(--color-1);
    --color-btn-primary-text      : var(--color-white);
    --color-btn-primary-hover     : var(--color-1-light);
    --color-btn-primary-hover-text: var(--color-white);
    --color-btn-stroke            : var(--color-text-dark);
    --color-btn-stroke-text       : var(--color-text-dark);
    --color-btn-stroke-hover      : var(--color-text-dark);
    --color-btn-stroke-hover-text : var(--color-white);
    --color-preloader-bg: var(--color-gray-10);
    --color-loader      : var(--color-3);
    --color-loader-light: var(--color-gray-14);

}

:root {

    --base-size     : 62.5%;
    --multiplier    : 1;
    --base-font-size: calc(2rem * var(--multiplier));
    --space         : calc(3.2rem * var(--multiplier));
    --vspace-0_125: calc(0.125 * var(--space));
    --vspace-0_25 : calc(0.25 * var(--space));
    --vspace-0_375: calc(0.375 * var(--space));
    --vspace-0_5  : calc(0.5 * var(--space));
    --vspace-0_625: calc(0.625 * var(--space));
    --vspace-0_75 : calc(0.75 * var(--space));
    --vspace-0_875: calc(0.875 * var(--space));
    --vspace-1    : calc(var(--space));
    --vspace-1_25 : calc(1.25 * var(--space));
    --vspace-1_5  : calc(1.5 * var(--space));
    --vspace-1_75 : calc(1.75 * var(--space));
    --vspace-2    : calc(2 * var(--space));
    --vspace-2_5  : calc(2.5 * var(--space));
    --vspace-3    : calc(3 * var(--space));
    --vspace-3_5  : calc(3.5 * var(--space));
    --vspace-4    : calc(4 * var(--space));
    --vspace-4_5  : calc(4.5 * var(--space));
    --vspace-5    : calc(5 * var(--space));
    --vspace-5_5  : calc(5.5 * var(--space));
    --vspace-6    : calc(6 * var(--space));
    --vspace-6_5  : calc(6.5 * var(--space));
    --vspace-7    : calc(7 * var(--space));
    --vspace-7_5  : calc(7.5 * var(--space));
    --vspace-8    : calc(8 * var(--space));
    --vspace-8_5  : calc(8.5 * var(--space));
    --vspace-9    : calc(9 * var(--space));
    --vspace-9_5  : calc(9.5 * var(--space));
    --vspace-10   : calc(10 * var(--space));
    --text-scale-ratio: 1.2;
    --text-size       : var(--base-font-size);
    --text-xs         : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm         : calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md         : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg         : calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl         : calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl        : calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl       : calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-display-1  : calc(var(--text-xxxl) * var(--text-scale-ratio));
    --text-display-2  : calc(var(--text-display-1) * var(--text-scale-ratio));
    --text-display-3  : calc(var(--text-display-2) * var(--text-scale-ratio));
    --text-huge-1     : calc(var(--text-display-3) * var(--text-scale-ratio));
    --text-huge-2     : calc(var(--text-huge-1) * var(--text-scale-ratio));
    --text-huge-3     : calc(var(--text-huge-2) * var(--text-scale-ratio));
    --vspace-btn: var(--vspace-1_75);
}

:root {

    --width-sixteen-cols: 1760px;
    --width-default     : 1280px;
    --width-wide        : 1600px;
    --width-wider       : 1800px;
    --width-narrow      : 1200px;
    --width-narrower    : 1000px;
    --width-narrowest   : 800px;
    --width-full        : 100%;
    --width-grid-max    : var(--width-default);
    --gutter: 2.6rem;
}