:root {
    --wp--custom--px: 140px;
    --wp--custom--gap: 100px;
    --wp--custom--block-gap: 140px;
    --spacing-100: 100px;
    --spacing-80: 80px;
    --spacing-60: 60px;
    --spacing-50: 50px;
    --spacing-40: 40px;
    --spacing-30: 30px;
    --spacing-20: 20px;
    --spacing-10: 10px;
}

@media not all and (min-width: 1537px) {
    :root {
        --wp--preset--font-size--menu-item: 18px;
    }
}

@media not all and (min-width: 1281px) {
    :root {
        --wp--custom--px: 20px;
        --wp--custom--gap: 100px;
        --wp--custom--block-gap: 60px;
        --spacing-100: 80px;
        --wp--preset--font-size--h-1: 46px;
    }
}

@media not all and (min-width: 1025px) {
    :root {
        --wp--custom--gap: 70px;
        --wp--custom--block-gap: 60px;
        --spacing-100: 60px;
        --wp--preset--font-size--h-1: 38px;
    }
}

@media not all and (min-width: 769px) {
    :root {
        --wp--preset--font-size--h-1: 32px;
        --wp--preset--font-size--h-2: 24px;
        --wp--preset--font-size--h-3: 20px;
        --wp--preset--font-size--callout: 18px;
        --wp--preset--font-size--callout-2: 20px;
        --wp--preset--font-size--callout-3: 32px;
        --wp--custom--gap: 40px;
        --spacing-100: 40px;
    }
}

@media not all and (min-width: 641px) {
    :root {
        --wp--custom--block-gap: 20px;
    }
}

@media not all and (min-width: 391px) {
    :root {
        --wp--preset--font-size--h-1: 24px;
        --wp--preset--font-size--h-2: 20px;
        --wp--preset--font-size--callout-2: 20px;
        --wp--custom--px: 20px;
        --spacing-100: 20px;
    }
}