:root {
    /* Viewport Height */
    --vh: 100vh;
    /* Width and Gutters */
    --vs-e-gutter-x: 0;
    --vs-gutter-x: 10px; /* Virtus Default 1.5rem */
    --vs-gutter-y: 0;
    --vs-padding-small-x: 0;
    --vs-padding-large-x: 0;
    --max-vw: 1920px;
    /* Margin and padding values */
    --margin-0: 0rem;
    --margin-1: 0.625rem; /* 10px */
    --margin-2: 0.9375rem; /* 15px */
    --margin-3: 1.25rem; /* 20px */
    --margin-4: 1.875rem; /* 30px */
    --margin-5: 2.5rem; /* 40px */
    --margin-6: 3.125rem; /* 50px */
    --margin-7: 4.375rem; /* 70px */
    --margin-8: 6.25rem; /* 100px */
    --margin-9: 9.375rem; /* 150px */
    --margin-10: 12.5rem; /* 200px */
    --margin-n1: -0.625rem;
    --margin-n2: -0.9375rem;
    --margin-n3: -1.25rem;
    --margin-n4: -1.875rem;
    --margin-n5: -2.5rem;
    --margin-n6: -3.125rem;
    --margin-n7: -4.375rem;
    --margin-n8: -6.25rem;
    --margin-n9: -9.375rem;
    --margin-n10: -12.5rem;

    /* Flexbox alignments */
    --justify-center: center;
    --justify-between: space-between;
    --justify-around: space-around;
    --justify-evenly: space-evenly;
    --justify-start: flex-start;
    --justify-end: flex-end;
    --align-start: flex-start;
    --align-center: center;
    --align-end: flex-end;

    /* Cols and Offset percentages */
    --col-1: 8.33333333%;
    --col-2: 16.66666667%;
    --col-3: 25%;
    --col-4: 33.33333333%;
    --col-5: 41.66666667%;
    --col-6: 50%;
    --col-7: 58.33333333%;
    --col-8: 66.66666667%;
    --col-9: 75%;
    --col-10: 83.33333333%;
    --col-11: 91.66666667%;
    --col-12: 100%;
    --col-n1: -8.33333333%;
    --col-n2: -16.66666667%;
    --col-n3: -25%;
    --col-n4: -33.33333333%;
    --col-n5: -41.66666667%;
    --col-n6: -50%;
    --col-n7: -58.33333333%;
    --col-n8: -66.66666667%;
    --col-n9: -75%;
    --col-n10: -83.33333333%;
    --col-n11: -91.66666667%;
    --col-n12: -100%;

    /* Spacing variables */
    --sp-xs: calc(2.5rem + ((1vw - 0.225rem) * 7.8125)); /* 40px - 70px */
    --sp-s: calc(3.125rem + ((1vw - 0.225rem) * 5.2083)); /* 50px - 70px */
    --sp-m: calc(4.375rem + ((1vw - 0.225rem) * 7.8125)); /*70px - 100px*/
    --sp-l: calc(9.375rem + ((1vw - 0.225rem) * 5.2083)); /*150px - 170px*/
}

@media (min-width: 576px) {
    :root {
        /* --vs-e-gutter-x: 10px; */
        --vs-gutter-x: 64px;
        --vs-gutter-y: 0;
    }
}
@media (min-width: 744px) {
    /* #smooth-content {
        padding-top: 175px;
    } */
    :root {
        --sp-xs: calc(4.375rem + ((1vw - 0.465rem) * 2.8409)); /* 70px - 100px */
        --sp-s: calc(4.375rem + ((1vw - 0.465rem) * 2.8409)); /* 70px - 100px */
        --sp-m: calc(6.25rem + ((1vw - 0.465rem) * 4.7348)); /* 100px - 150px */
        --sp-l: calc(10.625rem + ((1vw - 0.465rem) * 7.5758)); /* 170px - 250px */
        --vs-e-gutter-x: 10px;
        --vs-gutter-x: 10px;
        --vs-gutter-y: 0;
        --vs-padding-small-x: 89px;
        --vs-padding-large-x: 89px;
    }
}
@media (min-width: 1200px) {
    /* #smooth-content {
        padding-top: 185px;
    } */
    :root {
        --vs-e-gutter-x: 20px;
        --vs-gutter-x: 20px;
        --vs-gutter-y: 0;
        --vs-padding-small-x: 126px;
        --vs-padding-large-x: 178px;
    }
}
@media (min-width: 1800px) {
    /* #smooth-content {
        padding-top: 185px;
    } */
    :root {
        --sp-xs: 6.25rem; /* 100px */
        --sp-s: 6.25rem; /* 100px */
        --sp-m: 9.375rem; /* 150px */
        --sp-l: 15.625rem; /* 250px */
    }
}