* {
  box-sizing: border-box;
}

.grid {
  display: flex;
  display: grid;
}

.inline-grid {
  display: inline-flex;
  display: inline-grid;
}

.grid, .inline-grid {
  grid-gap: 5px;
  max-width: 100%;
}

.rows-auto-fit {
  grid-auto-rows: 1fr;
}

.columns-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.columns-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.justify-auto {
  justify-items: auto;
}

.justify-self-auto {
  justify-self: auto;
}

.align-auto {
  align-items: auto;
}

.align-self-auto {
  align-self: auto;
}

.justify-normal {
  justify-items: normal;
}

.justify-self-normal {
  justify-self: normal;
}

.align-normal {
  align-items: normal;
}

.align-self-normal {
  align-self: normal;
}

.justify-start {
  justify-items: start;
}

.justify-self-start {
  justify-self: start;
}

.align-start {
  align-items: start;
}

.align-self-start {
  align-self: start;
}

.justify-center {
  justify-items: center;
}

.justify-self-center {
  justify-self: center;
}

.align-center {
  align-items: center;
}

.align-self-center {
  align-self: center;
}

.justify-end {
  justify-items: end;
}

.justify-self-end {
  justify-self: end;
}

.align-end {
  align-items: end;
}

.align-self-end {
  align-self: end;
}

.justify-stretch {
  justify-items: stretch;
}

.justify-self-stretch {
  justify-self: stretch;
}

.align-stretch {
  align-items: stretch;
}

.align-self-stretch {
  align-self: stretch;
}

.justify-baseline {
  justify-items: baseline;
}

.justify-self-baseline {
  justify-self: baseline;
}

.align-baseline {
  align-items: baseline;
}

.align-self-baseline {
  align-self: baseline;
}

.justify-content-normal {
  justify-content: normal;
}

.align-content-normal {
  align-content: normal;
}

.justify-content-start {
  justify-content: start;
}

.align-content-start {
  align-content: start;
}

.justify-content-end {
  justify-content: end;
}

.align-content-end {
  align-content: end;
}

.justify-content-center {
  justify-content: center;
}

.align-content-center {
  align-content: center;
}

.justify-content-stretch {
  justify-content: stretch;
}

.align-content-stretch {
  align-content: stretch;
}

.justify-content-space-around {
  justify-content: space-around;
}

.align-content-space-around {
  align-content: space-around;
}

.justify-content-space-between {
  justify-content: space-between;
}

.align-content-space-between {
  align-content: space-between;
}

.justify-content-space-evenly {
  justify-content: space-evenly;
}

.align-content-space-evenly {
  align-content: space-evenly;
}

.justify-content-baseline {
  justify-content: baseline;
}

.align-content-baseline {
  align-content: baseline;
}

.grid-item {
  border-radius: 3px;
  padding: 1rem;
  background-color: #E0E0E0;
  color: #212121;
}

.offset-1 {
  grid-column-start: 2;
}

.width-1 {
  flex: 1 1 auto;
  grid-column: span 1;
}

.columns-1 {
  grid-template-columns: repeat(1, 1fr);
}

.columns-1-auto {
  grid-template-columns: repeat(1, auto);
}

.rows-1 {
  grid-template-rows: repeat(1, 1fr);
}

.grid-column-start-1 {
  grid-column-start: 1;
}

.grid-column-end-1 {
  grid-column-end: 1;
}

.grid-row-start-1 {
  grid-row-start: 1;
}

.grid-row-end-1 {
  grid-row-end: 1;
}

@media (max-width: 450px) {
  .columns-1 {
    grid-template-columns: 1fr;
  }

  .width-1 {
    grid-column: span 1;
  }
}
.offset-2 {
  grid-column-start: 3;
}

.width-2 {
  flex: 2 1 auto;
  grid-column: span 2;
}

.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.columns-2-auto {
  grid-template-columns: repeat(2, auto);
}

.rows-2 {
  grid-template-rows: repeat(2, 1fr);
}

.grid-column-start-2 {
  grid-column-start: 2;
}

.grid-column-end-2 {
  grid-column-end: 2;
}

.grid-row-start-2 {
  grid-row-start: 2;
}

.grid-row-end-2 {
  grid-row-end: 2;
}

@media (max-width: 450px) {
  .columns-2 {
    grid-template-columns: 1fr;
  }

  .width-2 {
    grid-column: span 1;
  }
}
.offset-3 {
  grid-column-start: 4;
}

.width-3 {
  flex: 3 1 auto;
  grid-column: span 3;
}

.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.columns-3-auto {
  grid-template-columns: repeat(3, auto);
}

.rows-3 {
  grid-template-rows: repeat(3, 1fr);
}

.grid-column-start-3 {
  grid-column-start: 3;
}

.grid-column-end-3 {
  grid-column-end: 3;
}

.grid-row-start-3 {
  grid-row-start: 3;
}

.grid-row-end-3 {
  grid-row-end: 3;
}

@media (max-width: 450px) {
  .columns-3 {
    grid-template-columns: 1fr;
  }

  .width-3 {
    grid-column: span 1;
  }
}
.offset-4 {
  grid-column-start: 5;
}

.width-4 {
  flex: 4 1 auto;
  grid-column: span 4;
}

.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.columns-4-auto {
  grid-template-columns: repeat(4, auto);
}

.rows-4 {
  grid-template-rows: repeat(4, 1fr);
}

.grid-column-start-4 {
  grid-column-start: 4;
}

.grid-column-end-4 {
  grid-column-end: 4;
}

.grid-row-start-4 {
  grid-row-start: 4;
}

.grid-row-end-4 {
  grid-row-end: 4;
}

@media (max-width: 450px) {
  .columns-4 {
    grid-template-columns: 1fr;
  }

  .width-4 {
    grid-column: span 1;
  }
}
.offset-5 {
  grid-column-start: 6;
}

.width-5 {
  flex: 5 1 auto;
  grid-column: span 5;
}

.columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.columns-5-auto {
  grid-template-columns: repeat(5, auto);
}

.rows-5 {
  grid-template-rows: repeat(5, 1fr);
}

.grid-column-start-5 {
  grid-column-start: 5;
}

.grid-column-end-5 {
  grid-column-end: 5;
}

.grid-row-start-5 {
  grid-row-start: 5;
}

.grid-row-end-5 {
  grid-row-end: 5;
}

@media (max-width: 450px) {
  .columns-5 {
    grid-template-columns: 1fr;
  }

  .width-5 {
    grid-column: span 1;
  }
}
.offset-6 {
  grid-column-start: 7;
}

.width-6 {
  flex: 6 1 auto;
  grid-column: span 6;
}

.columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.columns-6-auto {
  grid-template-columns: repeat(6, auto);
}

.rows-6 {
  grid-template-rows: repeat(6, 1fr);
}

.grid-column-start-6 {
  grid-column-start: 6;
}

.grid-column-end-6 {
  grid-column-end: 6;
}

.grid-row-start-6 {
  grid-row-start: 6;
}

.grid-row-end-6 {
  grid-row-end: 6;
}

@media (max-width: 450px) {
  .columns-6 {
    grid-template-columns: 1fr;
  }

  .width-6 {
    grid-column: span 1;
  }
}
.offset-7 {
  grid-column-start: 8;
}

.width-7 {
  flex: 7 1 auto;
  grid-column: span 7;
}

.columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.columns-7-auto {
  grid-template-columns: repeat(7, auto);
}

.rows-7 {
  grid-template-rows: repeat(7, 1fr);
}

.grid-column-start-7 {
  grid-column-start: 7;
}

.grid-column-end-7 {
  grid-column-end: 7;
}

.grid-row-start-7 {
  grid-row-start: 7;
}

.grid-row-end-7 {
  grid-row-end: 7;
}

@media (max-width: 450px) {
  .columns-7 {
    grid-template-columns: 1fr;
  }

  .width-7 {
    grid-column: span 1;
  }
}
.offset-8 {
  grid-column-start: 9;
}

.width-8 {
  flex: 8 1 auto;
  grid-column: span 8;
}

.columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.columns-8-auto {
  grid-template-columns: repeat(8, auto);
}

.rows-8 {
  grid-template-rows: repeat(8, 1fr);
}

.grid-column-start-8 {
  grid-column-start: 8;
}

.grid-column-end-8 {
  grid-column-end: 8;
}

.grid-row-start-8 {
  grid-row-start: 8;
}

.grid-row-end-8 {
  grid-row-end: 8;
}

@media (max-width: 450px) {
  .columns-8 {
    grid-template-columns: 1fr;
  }

  .width-8 {
    grid-column: span 1;
  }
}
.offset-9 {
  grid-column-start: 10;
}

.width-9 {
  flex: 9 1 auto;
  grid-column: span 9;
}

.columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.columns-9-auto {
  grid-template-columns: repeat(9, auto);
}

.rows-9 {
  grid-template-rows: repeat(9, 1fr);
}

.grid-column-start-9 {
  grid-column-start: 9;
}

.grid-column-end-9 {
  grid-column-end: 9;
}

.grid-row-start-9 {
  grid-row-start: 9;
}

.grid-row-end-9 {
  grid-row-end: 9;
}

@media (max-width: 450px) {
  .columns-9 {
    grid-template-columns: 1fr;
  }

  .width-9 {
    grid-column: span 1;
  }
}
.offset-10 {
  grid-column-start: 11;
}

.width-10 {
  flex: 10 1 auto;
  grid-column: span 10;
}

.columns-10 {
  grid-template-columns: repeat(10, 1fr);
}

.columns-10-auto {
  grid-template-columns: repeat(10, auto);
}

.rows-10 {
  grid-template-rows: repeat(10, 1fr);
}

.grid-column-start-10 {
  grid-column-start: 10;
}

.grid-column-end-10 {
  grid-column-end: 10;
}

.grid-row-start-10 {
  grid-row-start: 10;
}

.grid-row-end-10 {
  grid-row-end: 10;
}

@media (max-width: 450px) {
  .columns-10 {
    grid-template-columns: 1fr;
  }

  .width-10 {
    grid-column: span 1;
  }
}
.offset-11 {
  grid-column-start: 12;
}

.width-11 {
  flex: 11 1 auto;
  grid-column: span 11;
}

.columns-11 {
  grid-template-columns: repeat(11, 1fr);
}

.columns-11-auto {
  grid-template-columns: repeat(11, auto);
}

.rows-11 {
  grid-template-rows: repeat(11, 1fr);
}

.grid-column-start-11 {
  grid-column-start: 11;
}

.grid-column-end-11 {
  grid-column-end: 11;
}

.grid-row-start-11 {
  grid-row-start: 11;
}

.grid-row-end-11 {
  grid-row-end: 11;
}

@media (max-width: 450px) {
  .columns-11 {
    grid-template-columns: 1fr;
  }

  .width-11 {
    grid-column: span 1;
  }
}
.offset-12 {
  grid-column-start: 13;
}

.width-12 {
  flex: 12 1 auto;
  grid-column: span 12;
}

.columns-12 {
  grid-template-columns: repeat(12, 1fr);
}

.columns-12-auto {
  grid-template-columns: repeat(12, auto);
}

.rows-12 {
  grid-template-rows: repeat(12, 1fr);
}

.grid-column-start-12 {
  grid-column-start: 12;
}

.grid-column-end-12 {
  grid-column-end: 12;
}

.grid-row-start-12 {
  grid-row-start: 12;
}

.grid-row-end-12 {
  grid-row-end: 12;
}

@media (max-width: 450px) {
  .columns-12 {
    grid-template-columns: 1fr;
  }

  .width-12 {
    grid-column: span 1;
  }
}