/* ============================================
   SPACING VARIABLES
   ============================================ */

:root {
    --spacing-extra-small: 4px;
    --spacing-small: 8px;
    --spacing-medium: 80px;
    --spacing-large: 48px;
    --spacing-extra-large: 80px;
}

@media (min-width: 360px) {
    :root {
        --spacing-small: 12px;
        --spacing-medium: 104px;
        --spacing-large: 60px;
        --spacing-extra-large: 104px;
    }
}

@media (min-width: 768px) {
    :root {
        --spacing-small: 16px;
        --spacing-medium: 168px;
        --spacing-large: 80px;
        --spacing-extra-large: 168px;
    }
}

@media (min-width: 1440px) {
    :root {
        --spacing-small: 20px;
        --spacing-large: 80px;
        --spacing-extra-large: 220px;
    }
}

@media (min-width: 1920px) {
    :root {
        --spacing-small: 24px;
        --spacing-medium: 220px;
        --spacing-large: 104px;
        --spacing-extra-large: 280px;
    }
}