:root {
    /* container vars */
    --container-width: 1148px;
    --container-inline-paddings: 24px;

    /* font vars */
    --font-family: 'Roboto', sans-serif;

    /* color vars */
    --color-light: #FFFDF9;
    --color-light-darker: #A4A4A4;
    --color-primary: #334A9E;
    --color-primary-darker: #263877;
    --color-primary-lightest: #EEF0F6;
    --color-primary-lighter: #EBEDF6;
    --color-primary-darkest: #050710;
    --color-black: #0A0A0A;
    --color-black-lighter: #4E4E4E;
    --color-error: #B01F24;
    --color-gray: #64748b;

    /* text vars */
    --text-size-xl: 72px;
    --text-size-lg: 60px;
    --text-size-md: 20px;
    --text-size-sm: 17px;
    --text-size-xs: 15px;
    --text-size-xxs: 13px;

    /* other */
    --transition-duration: 0.3s;
    --transition-timing-function: ease;
    --header-height: 92.55px;
    --border-radius-primary: 36px;
    --border-radius-secondary: 24px;
    --section-offset: 80px;
}

@media screen and (max-width: 1300px) {
    :root {
        --container-width: 854px;
        --header-height: 88px;
        --text-size-lg: 44px;
    }
}

@media screen and (max-width: 992px) {
    :root {
        --header-height: 68px;
        --text-size-lg: 32px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --section-offset: 40px;
    }
}

@media screen and (max-width: 576px) {
    /* reserved breakpoint */
}

.mb-4 {
    margin-bottom: 16px;
}