:root {
    --column-gap: 40px;
    --column-row: 30px;
}

/**
***************
Grid
***************
**/

.container {
    max-width: 1155px;
    width: 100%;
    margin: 0 auto;
}

.row-grid {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-auto-flow: row;
    /*grid-template-columns: repeat(auto-fill, 65.83px);*/
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: var(--column-gap);
    grid-template-rows: [row] auto;
    grid-row-gap: 30px;
}

.row-flex {
    width: 100%;
    margin: 0 calc(var(--column-gap)/-2);
    display: flex;
    flex-wrap: wrap;
}

.row-flex > * {
    flex: 0 0 auto;
    max-width: 100%;
    padding-left: calc(var(--column-gap)/2);
    padding-right: calc(var(--column-gap)/2);
}

.row-flex > .flex-6 {
    max-width: 50%;
}

@media (max-width: 1023px) {
    .container {
        max-width: 100%;
        padding: 0 25px;
    }

    .row-grid {
        grid-template-columns: repeat(4, minmax(21px, 1fr));
        grid-column-gap: 21px;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 9px;
    }
}

.row-grid .grid-1 {
    grid-column: span 1;
}

.row-grid .grid-2 {
    grid-column: span 2;
}

.row-grid .grid-3 {
    grid-column: span 3;
}

.row-grid .grid-4 {
    grid-column: span 4;
}

.row-grid .grid-5 {
    grid-column: span 5;
}

.row-grid .grid-6 {
    grid-column: span 6;
}

.row-grid .grid-7 {
    grid-column: span 7;
}

.row-grid .grid-8 {
    grid-column: span 8;
}

.row-grid .grid-10 {
    grid-column: span 10;
}

.row-grid .grid-11 {
    grid-column: span 11;
}

.row-grid .grid-12 {
    grid-column: span 12;
}

@media (max-width: 1023px) {
    .row-grid .grid-2, .row-grid .grid-3, .row-grid .grid-4, .row-grid .grid-5, .row-grid .grid-6, .row-grid .grid-7, .row-grid .grid-8, .row-grid .grid-10, .row-grid .grid-11, .row-grid .grid-12 {
        grid-column: span 4;
    }

    .inner-row .grid-6 {
        grid-column: span 2;
    }
}