@media only screen and (min-width: 990px) {
    /* only desktop */
}

@media only screen and (min-width: 767px) {
    /* desktop and tablet */
}

@media only screen and (min-width: 767px) and (max-width: 989px) {
    /* only tablet */
}

@media only screen and (max-width: 989px) {
    /* tablet and mobile */
}

@media only screen and (max-width: 768px) {
    /* only mobile */
}

:root {
    --sp-0: 0;               /* 0px */
    --sp-1: 0.25rem;         /* 4px */
    --sp-2: 0.5rem;          /* 8px */
    --sp-3: 0.75rem;         /* 12px */
    --sp-4: 1rem;            /* 16px */
    --sp-5: 1.5rem;          /* 24px */
    --sp-6: 2rem;            /* 32px */
    --sp-7: 3rem;            /* 48px */
    --sp-8: 4rem;            /* 64px */
    --sp-9: 6rem;            /* 96px */
    --sp-10: 8rem;           /* 128px */
    --sp-11: 12rem;          /* 192px */
    --sp-12: 16rem;          /* 256px */
    --sp-site-width: 1310px;
}

@media only screen and (max-width: 1120px) {
    :root {
        --sp-7: 2.5rem;      /* 40px */
        --sp-8: 3.5rem;      /* 56px */
        --sp-9: 4.5rem;      /* 72px */
        --sp-10: 5.5rem;     /* 88px */
        --sp-11: 7.5rem;     /* 120px */
        --sp-12: 9.5rem;     /* 152px */
    }
}

@media only screen and (max-width: 619px) {
    :root {
        --sp-8: 3rem;        /* 48px */
        --sp-9: 4rem;        /* 64px */
        --sp-10: 5rem;       /* 80px */
        --sp-11: 6rem;       /* 96px */
        --sp-12: 7rem;       /* 112px */
    }
}


.sp-mb-0,
.sp-mb-0 * {
    margin-bottom: var(--sp-0) !important;
}


@media only screen and (max-width: 768px) {
    /* only mobile */

    .sp-mb-0-col-mobile {
        margin-bottom: var(--sp-0) !important;
    }

    .sp-mb-5-col-mobile {
        margin-bottom: var(--sp-5) !important;
    }
}

/**/
.sp-mw-10 {
    max-width: calc(var(--sp-site-width) * .1);
}

.sp-mw-20 {
    max-width: calc(var(--sp-site-width) * .2);
}

.sp-mw-30 {
    max-width: calc(var(--sp-site-width) * .3);
}

.sp-mw-40 {
    max-width: calc(var(--sp-site-width) * .4);
}

.sp-mw-50 {
    max-width: calc(var(--sp-site-width) * .5);
}

.sp-mw-60 {
    max-width: calc(var(--sp-site-width) * .6);
}

.sp-mw-70 {
    max-width: calc(var(--sp-site-width) * .7);
}

.sp-mw-80 {
    max-width: calc(var(--sp-site-width) * .8);
}

.sp-mw-90 {
    max-width: calc(var(--sp-site-width) * .9);
}