.grid-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: var(--align-items);
}

.grid-block-limiter.max-width-narrow {
    max-width: var(--max-width-narrow);
}

.grid-block-limiter.max-width-normal {
    max-width: var(--max-width-normal);
}

.grid-row {
    display: flex;
    justify-content: space-between;
    align-items: var(--align-items);
    flex-wrap: wrap;
    margin: 0 calc(var(--gutter) * -0.5);
}

[class*="grid-column-width"] {
    padding-right: calc(var(--gutter)/2);
    padding-left: calc(var(--gutter)/2);
    flex-basis: calc((100% / var(--columns)) * var(--column-width));
}

/* --- Example selectors -- */
/* Not necessary for the grid to work */

.sidebar {
    --column-width: 2;
}

.content {
    --column-width: 6;
}


.column-width--full {
    --column-width: var(--columns);
}

.column-width--fifth {
    --column-width: 2.4;
}

.s--1 {
    --column-width: 1;
}

.s--2 {
    --column-width: 2;
}

.s--3 {
    --column-width: 3;
}

.s--4 {
    --column-width: 4;
}

.s--5 {
    --column-width: 5;
}

.s--6 {
    --column-width: 6;
}

.s--7 {
    --column-width: 7;
}

.s--8 {
    --column-width: 8;
}

.s--9 {
    --column-width: 9;
}

.s--10 {
    --column-width: 10;
}

.s--11 {
    --column-width: 11;
}

.s--12 {
    --column-width: 12;
}

@media (min-width: 425px) {
    .ml--1 {
        --column-width: 1;
    }
    
    .ml--2 {
        --column-width: 2;
    }
    
    .ml--3 {
        --column-width: 3;
    }
    
    .ml--4 {
        --column-width: 4;
    }
    
    .ml--5 {
        --column-width: 5;
    }
    
    .ml--6 {
        --column-width: 6;
    }
    
    .ml--7 {
        --column-width: 7;
    }
    
    .ml--8 {
        --column-width: 8;
    }
    
    .ml--9 {
        --column-width: 9;
    }
    
    .ml--10 {
        --column-width: 10;
    }
    
    .ml--11 {
        --column-width: 11;
    }
    
    .ml--12 {
        --column-width: 12;
    }
}
@media (min-width: 768px) {

    .t--1 {
        --column-width: 1;
    }

    .t--2 {
        --column-width: 2;
    }

    .t--3 {
        --column-width: 3;
    }

    .t--4 {
        --column-width: 4;
    }

    .t--5 {
        --column-width: 5;
    }

    .t--6 {
        --column-width: 6;
    }

    .t--7 {
        --column-width: 7;
    }

    .t--8 {
        --column-width: 8;
    }

    .t--9 {
        --column-width: 9;
    }

    .t--10 {
        --column-width: 10;
    }

    .t--11 {
        --column-width: 11;
    }

    .t--12 {
        --column-width: 12;
    }
}

@media (min-width: 1024px) {
    .l--1 {
        --column-width: 1;
    }

    .l--2 {
        --column-width: 2;
    }

    .l--3 {
        --column-width: 3;
    }

    .l--4 {
        --column-width: 4;
    }

    .l--5 {
        --column-width: 5;
    }

    .l--6 {
        --column-width: 6;
    }

    .l--7 {
        --column-width: 7;
    }

    .l--8 {
        --column-width: 8;
    }

    .l--9 {
        --column-width: 9;
    }

    .l--10 {
        --column-width: 10;
    }

    .l--11 {
        --column-width: 11;
    }

    .l--12 {
        --column-width: 12;
    }
}

@media (min-width: 1440px) {
    .ll--1 {
        --column-width: 1;
    }

    .ll--2 {
        --column-width: 2;
    }

    .ll--3 {
        --column-width: 3;
    }

    .ll--4 {
        --column-width: 4;
    }

    .ll--5 {
        --column-width: 5;
    }

    .ll--6 {
        --column-width: 6;
    }

    .ll--7 {
        --column-width: 7;
    }

    .ll--8 {
        --column-width: 8;
    }

    .ll--9 {
        --column-width: 9;
    }

    .ll--10 {
        --column-width: 10;
    }

    .ll--11 {
        --column-width: 11;
    }

    .ll--12 {
        --column-width: 12;
    }
}

@media (min-width: 2560px) {
    .vk--1 {
        --column-width: 1;
    }

    .vk--2 {
        --column-width: 2;
    }

    .vk--3 {
        --column-width: 3;
    }

    .vk--4 {
        --column-width: 4;
    }

    .vk--5 {
        --column-width: 5;
    }

    .vk--6 {
        --column-width: 6;
    }

    .vk--7 {
        --column-width: 7;
    }

    .vk--8 {
        --column-width: 8;
    }

    .vk--9 {
        --column-width: 9;
    }

    .vk--10 {
        --column-width: 10;
    }

    .vk--11 {
        --column-width: 11;
    }

    .vk--12 {
        --column-width: 12;
    }
}