:root {
  --columns: 12;
}

.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;
  }
}