:root {
    --font-primary: 'Montserrat', Arial, sans-serif;
    --font-secondary: 'Garamond', Georgia, sans-serif;

    --color-primary: #e3af64;
    --color-secondary: #3247bc;
    --color-tertiary: green;
    --color-light: #ccc;
    --color-dark: #333;
    --color-white: #ffffff;
    --color-black: #000000;

    --spacing-none: 0;
    --spacing-xsmall: 0.5rem;
    --spacing-small: 1rem;
    --spacing-medium: 2rem;
    --spacing-large: 3rem;
    --spacing-xlarge: 5rem;

    --boxed-width: 1440px;
    --boxed-gutter: 24px;
}

/* ========================================
       BREAKPOINTS
       Desktop : > 1199px
       Tablette : 768px - 1199px
       Mobile : < 768px
    ======================================== */
@media (max-width: 1199px) {
    :root {
        --boxed-width: 1140px;
    }
}

@media (max-width: 991px) {
    :root {
        --boxed-width: 960px;
        --boxed-gutter: 20px;
    }
}

@media (max-width: 767px) {
    :root {
        --boxed-width: 100%;
        --boxed-gutter: 16px;
    }
}