:root {
    --big--px: 200px;
    --px: 100px;
    --gap: 100px;
    --block--gap: 100px;
    --pt--text: 60px;
}

@media not all and (min-width: 1512px) {
    :root {
        --big--px: 80px;
        --px: 80px;
        --gap: 80px;
        --block--gap: 90px;
    }
}

@media not all and (min-width: 1280px) {
    :root {
        --big--px: 60px;
        --px: 60px;
        --gap: 60px;
        --block--gap: 60px;
        --wp--preset--font-size--h-1: 56px;
        --wp--preset--font-size--h-2: 48px;
        --wp--preset--font-size--h-3: 40px;
        --wp--preset--font-size--callout: 20px;
    }
}

@media not all and (min-width: 1024px) {
    :root {
        --big--px: 40px;
        --px: 40px;
        --gap: 40px;
        --block--gap: 40px;
        --pt--text: 40px;
    }
}

@media not all and (min-width: 768px) {
    :root {
        --wp--preset--font-size--h-1: 48px;
        --wp--preset--font-size--h-2: 40px;
        --wp--preset--font-size--h-3: 32px;
        --pt--text: 20px;
    }
}

@media not all and (min-width: 640px) {
    :root {
        --big--px: 20px;
        --px: 20px;
        --block--gap: 20px;
    }
}

@media not all and (min-width: 390px) {
    :root {
        --wp--preset--font-size--h-1: 40px;
        --wp--preset--font-size--h-2: 32px;
        --wp--preset--font-size--h-3: 28px;
    }
}