* {
    --margin-s: 12px;
    --margin-m: 18px;
    --margin-l: 24px;
    --margin-xl: 36px;
    --margin-xxl: 42px;
    --margin-xxxl: 64px;
    --margin-XL: 72px;
    --margin-XXL: 84px;
    --margin-XXXL: 96px;

    --padding-vs: 6px;
    --padding-s: 8px;
    --padding-m: 12px;
    --padding-l: 20px;
    --padding-xl: 30px;
    --padding-XL: 48px;
    --padding-XXL: 64px;
    --padding-XXXL: 72px;

    --border-radius-s: 4px;
    --border-radius-m: 8px;
    --border-radius-l: 10px;
    --border-radius-50: 50em;
}
@media screen and (min-width: 720px) {
    * {
        --margin-s: 12px;
        --margin-m: 18px;
        --margin-l: 24px;
        --margin-xl: 36px;
        --margin-xxl: 42px;
        --margin-xxxl: 64px;
        --margin-XL: 72px;
        --margin-XXL: 84px;
        --margin-XXXL: 96px;

        --padding-vs: 8px;
        --padding-s: 12px;
        --padding-m: 16px;
        --padding-l: 24px;
        --padding-xl: 36px;
        --padding-XL: 64px;
        --padding-XXL: 72px;
        --padding-XXXL: 84px;

        --padding-12-24: 12px 16px 12px 24px;

        --border-radius-s: 6px;
        --border-radius-m: 8px;
        --border-radius-l: 12px;
    }

}
@media screen and (min-width: 1024px) {

}