/*
-----------------------------
BASE
-----------------------------
*/
.container {
    width: 100%;
    max-width: 84rem;
    padding: 2rem;
    margin: 0 auto;
}

.grid-base {
    gap: 1rem;
}

/*
-----------------------------
GRID
-----------------------------
*/
.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.grid-2  { grid-template-columns: repeat( 2, minmax(0, 1fr)); }
.grid-3  { grid-template-columns: repeat( 3, minmax(0, 1fr)); }
.grid-4  { grid-template-columns: repeat( 4, minmax(0, 1fr)); }
.grid-5  { grid-template-columns: repeat( 5, minmax(0, 1fr)); }
.grid-6  { grid-template-columns: repeat( 6, minmax(0, 1fr)); }
.grid-7  { grid-template-columns: repeat( 7, minmax(0, 1fr)); }
.grid-8  { grid-template-columns: repeat( 8, minmax(0, 1fr)); }
.grid-9  { grid-template-columns: repeat( 9, minmax(0, 1fr)); }
.grid-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }

.grid-span-2  { grid-column-start: span 2; }
.grid-span-3  { grid-column-start: span 3; }
.grid-span-4  { grid-column-start: span 4; }
.grid-span-5  { grid-column-start: span 5; }
.grid-span-6  { grid-column-start: span 6; }
.grid-span-7  { grid-column-start: span 7; }
.grid-span-8  { grid-column-start: span 8; }
.grid-span-9  { grid-column-start: span 9; }
.grid-span-10 { grid-column-start: span 10; }

.center { text-align: center; }
.end    { text-align: end; }
.start  { text-align: start; }

.display-none { display: none; }
.display-block { display: block; }
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }

.display-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (min-width: 48em) {

    .grid-2-s  { grid-template-columns: repeat( 2, minmax(0, 1fr)); }
    .grid-3-s  { grid-template-columns: repeat( 3, minmax(0, 1fr)); }
    .grid-4-s  { grid-template-columns: repeat( 4, minmax(0, 1fr)); }
    .grid-5-s  { grid-template-columns: repeat( 5, minmax(0, 1fr)); }
    .grid-6-s  { grid-template-columns: repeat( 6, minmax(0, 1fr)); }
    .grid-7-s  { grid-template-columns: repeat( 7, minmax(0, 1fr)); }
    .grid-8-s  { grid-template-columns: repeat( 8, minmax(0, 1fr)); }
    .grid-9-s  { grid-template-columns: repeat( 9, minmax(0, 1fr)); }
    .grid-10-s { grid-template-columns: repeat(10, minmax(0, 1fr)); }

    .grid-nospan-s  { grid-column-start: unset; }
    .grid-span-2-s  { grid-column-start: span 2; }
    .grid-span-3-s  { grid-column-start: span 3; }
    .grid-span-4-s  { grid-column-start: span 4; }
    .grid-span-5-s  { grid-column-start: span 5; }
    .grid-span-6-s  { grid-column-start: span 6; }
    .grid-span-7-s  { grid-column-start: span 7; }
    .grid-span-8-s  { grid-column-start: span 8; }
    .grid-span-9-s  { grid-column-start: span 9; }
    .grid-span-10-s { grid-column-start: span 10; }

    .center-s { text-align: center; }
    .end-s    { text-align: end; }
    .start-s  { text-align: start; }

    .display-none-s { display: none; }
    .display-block-s { display: block; }
    .display-inline-s { display: inline; }
    .display-inline-block-s { display: inline-block; }

    .display-flex-s {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (min-width: 64em) {

    .grid-2-l  { grid-template-columns: repeat( 2, minmax(0, 1fr)); }
    .grid-3-l  { grid-template-columns: repeat( 3, minmax(0, 1fr)); }
    .grid-4-l  { grid-template-columns: repeat( 4, minmax(0, 1fr)); }
    .grid-5-l  { grid-template-columns: repeat( 5, minmax(0, 1fr)); }
    .grid-6-l  { grid-template-columns: repeat( 6, minmax(0, 1fr)); }
    .grid-7-l  { grid-template-columns: repeat( 7, minmax(0, 1fr)); }
    .grid-8-l  { grid-template-columns: repeat( 8, minmax(0, 1fr)); }
    .grid-9-l  { grid-template-columns: repeat( 9, minmax(0, 1fr)); }
    .grid-10-l { grid-template-columns: repeat(10, minmax(0, 1fr)); }

    .grid-nospan-l  { grid-column-start: unset; }
    .grid-span-2-l  { grid-column-start: span 2; }
    .grid-span-3-l  { grid-column-start: span 3; }
    .grid-span-4-l  { grid-column-start: span 4; }
    .grid-span-5-l  { grid-column-start: span 5; }
    .grid-span-6-l  { grid-column-start: span 6; }
    .grid-span-7-l  { grid-column-start: span 7; }
    .grid-span-8-l  { grid-column-start: span 8; }
    .grid-span-9-l  { grid-column-start: span 9; }
    .grid-span-10-l { grid-column-start: span 10; }

    .center-l { text-align: center; }
    .end-l    { text-align: end; }
    .start-l  { text-align: start; }

    .display-none-l { display: none; }
    .display-block-l { display: block; }
    .display-inline-l { display: inline; }
    .display-inline-block-l { display: inline-block; }

    .display-flex-l {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media only screen and (min-width: 84em) {

    .grid-2-xl  { grid-template-columns: repeat( 2, minmax(0, 1fr)); }
    .grid-3-xl  { grid-template-columns: repeat( 3, minmax(0, 1fr)); }
    .grid-4-xl  { grid-template-columns: repeat( 4, minmax(0, 1fr)); }
    .grid-5-xl  { grid-template-columns: repeat( 5, minmax(0, 1fr)); }
    .grid-6-xl  { grid-template-columns: repeat( 6, minmax(0, 1fr)); }
    .grid-7-xl  { grid-template-columns: repeat( 7, minmax(0, 1fr)); }
    .grid-8-xl  { grid-template-columns: repeat( 8, minmax(0, 1fr)); }
    .grid-9-xl  { grid-template-columns: repeat( 9, minmax(0, 1fr)); }
    .grid-10-xl { grid-template-columns: repeat(10, minmax(0, 1fr)); }

    .grid-nospan-xl  { grid-column-start: unset; }
    .grid-span-2-xl  { grid-column-start: span 2; }
    .grid-span-3-xl  { grid-column-start: span 3; }
    .grid-span-4-xl  { grid-column-start: span 4; }
    .grid-span-5-xl  { grid-column-start: span 5; }
    .grid-span-6-xl  { grid-column-start: span 6; }
    .grid-span-7-xl  { grid-column-start: span 7; }
    .grid-span-8-xl  { grid-column-start: span 8; }
    .grid-span-9-xl  { grid-column-start: span 9; }
    .grid-span-10-xl { grid-column-start: span 10; }

    .center-xl { text-align: center; }
    .end-xl    { text-align: end; }
    .start-xl  { text-align: start; }

    .display-none-xl { display: none; }
    .display-block-xl { display: block; }
    .display-inline-xl { display: inline; }
    .display-inline-block-xl { display: inline-block; }

    .display-flex-xl {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}