/**
 * @author: Yoann Le Crom <yoann.lecrom@abstractive.fr>
 * date:    2019-06-20 15:46:17
 */

/* Grid flexbox fallback */
.Grid {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem;
    overflow: hidden;
}
.Grid > * {
    width: calc(100%/var(--grid-columns) - 2rem);
    margin: 1rem;
}
.Grid--marginBottom {
    margin-bottom: 2rem;
}

@supports (display: grid) {
    .Grid {
        --grid-columns: 1;
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
        margin: 0;
    }
    .Grid > * {
        width: auto;
        margin: 0;
    }
}
.Grid--2 {
    --grid-columns: 2;
}
.Grid--3 {
    --grid-columns: 3;
}
.Grid--4 {
    --grid-columns: 4;
}
.Grid--5 {
    --grid-columns: 5;
}
.Grid--6 {
    --grid-columns: 6;
}
.Grid--padding {
    padding: 1rem;
}

@media (min-width: 620px) {
    .Grid--xxs-1 {
        --grid-columns: 1;
        grid-template-columns: 1fr;
    }
    .Grid--xxs-2 {
        --grid-columns: 2;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--xxs-3 {
        --grid-columns: 3;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--xxs-4 {
        --grid-columns: 4;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--xxs-5 {
        --grid-columns: 5;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--xxs-6 {
        --grid-columns: 6;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
}

@media (min-width: 900px) {
    .Grid--xs-1 {
        --grid-columns: 1;
        grid-template-columns: 1fr;
    }
    .Grid--xs-2 {
        --grid-columns: 2;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--xs-3 {
        --grid-columns: 3;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--xs-4 {
        --grid-columns: 4;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--xs-5 {
        --grid-columns: 5;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--xs-6 {
        --grid-columns: 6;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
}

@media (min-width: 960px) {
    .Grid--s-1 {
        --grid-columns: 1;
        grid-template-columns: 1fr;
    }
    .Grid--s-2 {
        --grid-columns: 2;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--s-3 {
        --grid-columns: 3;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--s-4 {
        --grid-columns: 4;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--s-5 {
        --grid-columns: 5;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--s-6 {
        --grid-columns: 6;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
}

@media (min-width: 1024px) {
    .Grid--m-1 {
        --grid-columns: 1;
        grid-template-columns: 1fr;
    }
    .Grid--m-2 {
        --grid-columns: 2;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--m-3 {
        --grid-columns: 3;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--m-4 {
        --grid-columns: 4;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--m-5 {
        --grid-columns: 5;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--m-6 {
        --grid-columns: 6;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
}

@media (min-width: 1260px) {
    .Grid--l-1 {
        --grid-columns: 1;
        grid-template-columns: 1fr;
    }
    .Grid--l-2 {
        --grid-columns: 2;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--l-3 {
        --grid-columns: 3;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--l-4 {
        --grid-columns: 4;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--l-5 {
        --grid-columns: 5;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    .Grid--l-6 {
        --grid-columns: 6;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
}

.Grid--marginBottom {
    margin-bottom: 2rem;
}


/* IE 10-11 */

@media all and (-ms-high-contrast:none)
{
    .Grid > * {
        width: calc(100% - 2.01rem);
    }
    .Grid--2 > * {
        width: calc(100%/2 - 2.01rem);
    }
    .Grid--3 > * {
        width: calc(100%/3 - 2.01rem);
    }
    .Grid--4 > * {
        width: calc(100%/4 - 2.01rem);
    }
    .Grid--5 > * {
        width: calc(100%/5 - 2.01rem);
    }
    .Grid--6 > * {
        width: calc(100%/6 - 2.01rem);
    }
}

@media all and (-ms-high-contrast:none) and (min-width: 620px) {
    .Grid--xxs-1 > * {
        width: calc(100% - 2.01rem);
    }
    .Grid--xxs-2 > * {
        width: calc(100%/2 - 2.01rem);
    }
    .Grid--xxs-3 > * {
        width: calc(100%/3 - 2.01rem);
    }
    .Grid--xxs-4 > * {
        width: calc(100%/4 - 2.01rem);
    }
    .Grid--xxs-5 > * {
        width: calc(100%/5 - 2.01rem);
    }
    .Grid--xxs-6 > * {
        width: calc(100%/6 - 2.01rem);
    }
}

@media all and (-ms-high-contrast:none) and (min-width: 900px) {
    .Grid--xs-1 > * {
        width: calc(100% - 2.01rem);
    }
    .Grid--xs-2 > * {
        width: calc(100%/2 - 2.01rem);
    }
    .Grid--xs-3 > * {
        width: calc(100%/3 - 2.01rem);
    }
    .Grid--xs-4 > * {
        width: calc(100%/4 - 2.01rem);
    }
    .Grid--xs-5 > * {
        width: calc(100%/5 - 2.01rem);
    }
    .Grid--xs-6 > * {
        width: calc(100%/6 - 2.01rem);
    }
}

@media all and (-ms-high-contrast:none) and (min-width: 960px) {
    .Grid--s-1 > * {
        width: calc(100% - 2.01rem);
    }
    .Grid--s-2 > * {
        width: calc(100%/2 - 2.01rem);
    }
    .Grid--s-3 > * {
        width: calc(100%/3 - 2.01rem);
    }
    .Grid--s-4 > * {
        width: calc(100%/4 - 2.01rem);
    }
    .Grid--s-5 > * {
        width: calc(100%/5 - 2.01rem);
    }
    .Grid--s-6 > * {
        width: calc(100%/6 - 2.01rem);
    }
}

@media all and (-ms-high-contrast:none) and (min-width: 1080px) {
    .Grid--m-1 > * {
        width: calc(100% - 2.01rem);
    }
    .Grid--m-2 > * {
        width: calc(100%/2 - 2.01rem);
    }
    .Grid--m-3 > * {
        width: calc(100%/3 - 2.01rem);
    }
    .Grid--m-4 > * {
        width: calc(100%/4 - 2.01rem);
    }
    .Grid--m-5 > * {
        width: calc(100%/5 - 2.01rem);
    }
    .Grid--m-6 > * {
        width: calc(100%/6 - 2.01rem);
    }
}

@media all and (-ms-high-contrast:none) and (min-width: 1260px) {
    .Grid--l-1 > * {
        width: calc(100% - 2.01rem);
    }
    .Grid--l-2 > * {
        width: calc(100%/2 - 2.01rem);
    }
    .Grid--l-3 > * {
        width: calc(100%/3 - 2.01rem);
    }
    .Grid--l-4 > * {
        width: calc(100%/4 - 2.01rem);
    }
    .Grid--l-5 > * {
        width: calc(100%/5 - 2.01rem);
    }
    .Grid--l-6 > * {
        width: calc(100%/6 - 2.01rem);
    }
}