/* DESKTOP */

/* Variables */

:root {
    --main-color: #ee2e43;
    --alt-color: #FC0;
    --alt-color-lighter: #233952;
    --light-bg-color: #f6f6f6;

    --grid-max-width: 1080px;
    --grid-smaller-max-width: 50%;

    --vertical-padding-l: 70px;
    --vertical-padding-m: 30px;
    --vertical-padding-s: 15px;

    --horizontal-padding-l: 70px;
    --horizontal-padding-m: 30px;
    --horizontal-padding-s: 15px;

    --vertical-margin-l: 70px;
    --vertical-margin-m: 30px;
    --vertical-margin-s: 15px;

    --h-font-family: "Urbanist", sans-serif;
    --h-font-size-l: 54px;
    --h-font-size-m: 32px;
    --h-font-size-s: 24px;
    --h-font-weight: 400;

    --subh-font-size: 20px;

    --body-font-family: "Manrope", sans-serif;
    --body-font-size: 17px;

    --font-color-light: #fff;
    --font-color-dark: #000;

    --button-padding: 10px 20px;
    --button-border-radius: 150px;
    --button-font-size: 16px;
    --button-font-weight: 400;
    --button-font-family: ;

    --default-overlay: rgba(0, 0, 0, 0.5);

    --base-flex-gap: 10px;
    --default-col-gap: 30px;
    --big-col-gap: 120px;

    --blurb-icon-width: 32px;
}

/* Responsive */

@media only screen and (max-width: 720px) {
    /* Variables */

    :root {
        --alt-color-lighter: #233952;
        --light-bg-color: #F2F5F9;

        --grid-max-width: 90%;
        --grid-smaller-max-width: 100%;


        --vertical-padding-l: 70px;
        --vertical-padding-m: 30px;
        --vertical-padding-s: 15px;

        --horizontal-padding-l: 70px;
        --horizontal-padding-m: 30px;
        --horizontal-padding-s: 15px;

        --vertical-margin-l: 70px;
        --vertical-margin-m: 30px;
        --vertical-margin-s: 15px;

        --h-font-size-l: 32px;
        --h-font-size-m: 28px;
        --h-font-weight: 600;

        --p-font-family: 'Hind';
        --p-font-size: 17px;

        --font-color-light: #fff;
        --font-color-dark: #000;

        --button-padding: 15px 40px;
        --button-border-radius: 5px;
        --button-font-size: 20px;
        --button-font-weight: 400;

        --default-overlay: rgba(0, 0, 0, 0.5);

        --base-flex-gap: 10px;
        --default-col-gap: 30px;
        --big-col-gap: 40px;

        --blurb-icon-width: 32px;
    }
}