:root {
    --main-top-margin: 60px;
    --main-gap: clamp(40px, 3.125vw, 60px);
    --main-padding: var(--main-gap);
    --content-gap: clamp(40px, calc(6.25vw - 20px), 60px);
    --txt-trim-top: -.146em;
    --txt-trim-bottom: -.166em;
    --content-box_title_font-size: clamp(18px, 3vw, 24px);
    --content-box_gap: clamp(24px, 5vw, 32px);

    --color-grey: #e8e8e8;
    --rem: 16px;
}

html, body {
    font-size: var(--rem);
}

.preload-block {
    background-color: var(--dark);
}

.preload-block > * {
    opacity: 0;
}

.title {
    display: block;
    text-transform: uppercase;
    margin-top: var(--txt-trim-top);
    margin-bottom: var(--txt-trim-bottom);
}

.txt-trim-cap {
    display: block;
    margin-top: var(--txt-trim-top);
    margin-bottom: var(--txt-trim-bottom);
    font: inherit;
}

.page-content {
    --sm-icon-size: 38px;
    margin-top: var(--content-gap);
}

.title.page-content__title {
    padding-bottom: var(--content-gap);
    font-size: 2em;
}


@media screen and (max-width: 959px) {
    :root {
        --main-padding: clamp(1.25rem, calc(7.5vw - 2rem), 2.5rem);
    }

}