:root {
    --spacing-h1: 16px;
    --spacing-h2: 16px;
    --spacing-h3: 16px;
    --spacing-v1: 48px;
    --spacing-v2: 24px;
    --spacing-v3: 16px;
    --spacing-v4: 12px;
    --spacing-half-of-v1: 24px;
    --spacing-container-max-width: 1920px;
}

@media screen and (min-width: 768px) {
    :root {
        --spacing-h1: 24px;
        --spacing-h2: 24px;
        --spacing-h3: 24px;
        --spacing-v1: 80px;
        --spacing-v2: 32px;
        --spacing-v3: 24px;
        --spacing-v4: 12px;
        --spacing-half-of-v1: 40px;
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --spacing-h1: 32px;
        --spacing-h2: 32px;
        --spacing-v1: 88px;
        --spacing-half-of-v1: 44px;
        --spacing-grid-1: calc((100% - 264px) / 12);
        --spacing-grid-4: calc((calc((100% - 264px) / 12) * 4) + (24px * 3));
        --spacing-grid-5: calc((calc((100% - 264px) / 12) * 5) + (24px * 4));
        --spacing-grid-6: calc((calc((100% - 264px) / 12) * 6) + (24px * 5));
        --spacing-grid-7: calc((calc((100% - 264px) / 12) * 7) + (24px * 6));
        --spacing-grid-8: calc((calc((100% - 264px) / 12) * 8) + (24px * 7));
        --spacing-grid-10: calc((calc((100% - 264px) / 12) * 10) + (24px * 9));
    }
}

@media screen and (min-width: 1280px) {
    :root {
        --spacing-h1: 64px;
        --spacing-h2: 40px;
        --spacing-v1: 112px;
        --spacing-v2: 40px;
        --spacing-v3: 24px;
        --spacing-half-of-v1: 56px;
    }
}

@media screen and (min-width: 1536px) {
    :root {
        --spacing-h1: 96px;
        --spacing-h2: 48px;
        --spacing-v1: 136px;
        --spacing-v2: 48px;
        --spacing-v3: 32px;
        --spacing-v4: 16px;
        --spacing-half-of-v1: 68px;
    }
}

@media screen and (min-width: 1920px) {
    :root {
        --spacing-h1: 156px;
        --spacing-h2: 56px;
        --spacing-v1: 160px;
        --spacing-v2: 56px;
        --spacing-half-of-v1: 80px;
    }
}