.layout {
  display: grid;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

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

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

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

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

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

/* five */

.layout_five .box--layout:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}
.layout_five .box--layout:nth-child(2) {
  grid-area: 1 / 3 / 2 / 5;
}
.layout_five .box--layout:nth-child(3) {
  grid-area: 1 / 5 / 2 / 7;
}
.layout_five .box--layout:nth-child(4) {
  grid-area: 2 / 1 / 3 / 4;
}
.layout_five .box--layout:nth-child(5) {
  grid-area: 2 / 4 / 3 / 7;
}

/* seven */

.layout_seven .box--layout:nth-child(1) {
  grid-area: 1 / 1 / 2 / 5;
}
.layout_seven .box--layout:nth-child(2) {
  grid-area: 1 / 5 / 2 / 9;
}
.layout_seven .box--layout:nth-child(3) {
  grid-area: 1 / 9 / 2 / 13;
}
.layout_seven .box--layout:nth-child(4) {
  grid-area: 2 / 1 / 3 / 4;
}
.layout_seven .box--layout:nth-child(5) {
  grid-area: 2 / 4 / 3 / 7;
}
.layout_seven .box--layout:nth-child(6) {
  grid-area: 2 / 7 / 3 / 10;
}
.layout_seven .box--layout:nth-child(7) {
  grid-area: 2 / 10 / 3 / 13;
}

/* eight */
.layout_eight .box--layout:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}
.layout_eight .box--layout:nth-child(2) {
  grid-area: 1 / 3 / 2 / 5;
}
.layout_eight .box--layout:nth-child(3) {
  grid-area: 1 / 5 / 2 / 7;
}
.layout_eight .box--layout:nth-child(4) {
  grid-area: 2 / 1 / 3 / 4;
}
.layout_eight .box--layout:nth-child(5) {
  grid-area: 2 / 4 / 3 / 7;
}
.layout_eight .box--layout:nth-child(6) {
  grid-area: 3 / 1 / 4 / 3;
}
.layout_eight .box--layout:nth-child(7) {
  grid-area: 3 / 3 / 4 / 5;
}
.layout_eight .box--layout:nth-child(8) {
  grid-area: 3 / 5 / 4 / 7;
}

/* nine */
.layout_nine .box--layout:nth-child(1) {
  grid-area: 1 / 1 / 2 / 5;
}
.layout_nine .box--layout:nth-child(2) {
  grid-area: 1 / 5 / 2 / 9;
}
.layout_nine .box--layout:nth-child(3) {
  grid-area: 1 / 9 / 2 / 13;
}
.layout_nine .box--layout:nth-child(4) {
  grid-area: 2 / 1 / 3 / 4;
}
.layout_nine .box--layout:nth-child(5) {
  grid-area: 2 / 4 / 3 / 7;
}
.layout_nine .box--layout:nth-child(6) {
  grid-area: 2 / 7 / 3 / 10;
}
.layout_nine .box--layout:nth-child(7) {
  grid-area: 2 / 10 / 3 / 13;
}
.layout_nine .box--layout:nth-child(8) {
  grid-area: 3 / 1 / 4 / 7;
}
.layout_nine .box--layout:nth-child(9) {
  grid-area: 3 / 7 / 4 / 13;
}

/* ten */
.layout_ten .box--layout:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}
.layout_ten .box--layout:nth-child(2) {
  grid-area: 1 / 3 / 2 / 5;
}
.layout_ten .box--layout:nth-child(3) {
  grid-area: 1 / 5 / 2 / 7;
}
.layout_ten .box--layout:nth-child(4) {
  grid-area: 2 / 1 / 3 / 4;
}
.layout_ten .box--layout:nth-child(5) {
  grid-area: 2 / 4 / 3 / 7;
}
.layout_ten .box--layout:nth-child(6) {
  grid-area: 3 / 1 / 4 / 3;
}
.layout_ten .box--layout:nth-child(7) {
  grid-area: 3 / 3 / 4 / 5;
}
.layout_ten .box--layout:nth-child(8) {
  grid-area: 3 / 5 / 4 / 7;
}
.layout_ten .box--layout:nth-child(9) {
  grid-area: 4 / 1 / 5 / 4;
}
.layout_ten .box--layout:nth-child(10) {
  grid-area: 4 / 4 / 5 / 7;
}

/* eleven */
.layout_eleven .box--layout:nth-child(1) {
  grid-area: 1 / 1 / 2 / 7;
}
.layout_eleven .box--layout:nth-child(2) {
  grid-area: 1 / 7 / 2 / 13;
}
.layout_eleven .box--layout:nth-child(3) {
  grid-area: 2 / 1 / 3 / 4;
}
.layout_eleven .box--layout:nth-child(4) {
  grid-area: 2 / 4 / 3 / 7;
}
.layout_eleven .box--layout:nth-child(5) {
  grid-area: 2 / 7 / 3 / 10;
}
.layout_eleven .box--layout:nth-child(6) {
  grid-area: 2 / 10 / 3 / 13;
}
.layout_eleven .box--layout:nth-child(7) {
  grid-area: 3 / 1 / 4 / 5;
}
.layout_eleven .box--layout:nth-child(8) {
  grid-area: 3 / 5 / 4 / 9;
}
.layout_eleven .box--layout:nth-child(9) {
  grid-area: 3 / 9 / 4 / 13;
}
.layout_eleven .box--layout:nth-child(10) {
  grid-area: 4 / 1 / 5 / 7;
}
.layout_eleven .box--layout:nth-child(11) {
  grid-area: 4 / 7 / 5 / 13;
}

/* twelve */
.layout_twelve .box--layout:nth-child(1) {
  grid-area: 1 / 1 / 2 / 7;
}
.layout_twelve .box--layout:nth-child(2) {
  grid-area: 1 / 7 / 2 / 13;
}
.layout_twelve .box--layout:nth-child(3) {
  grid-area: 2 / 1 / 3 / 4;
}
.layout_twelve .box--layout:nth-child(4) {
  grid-area: 2 / 4 / 3 / 7;
}
.layout_twelve .box--layout:nth-child(5) {
  grid-area: 2 / 7 / 3 / 10;
}
.layout_twelve .box--layout:nth-child(6) {
  grid-area: 2 / 10 / 3 / 13;
}
.layout_twelve .box--layout:nth-child(7) {
  grid-area: 3 / 1 / 4 / 5;
}
.layout_twelve .box--layout:nth-child(8) {
  grid-area: 3 / 5 / 4 / 9;
}
.layout_twelve .box--layout:nth-child(9) {
  grid-area: 3 / 9 / 4 / 13;
}
.layout_twelve .box--layout:nth-child(10) {
  grid-area: 4 / 1 / 5 / 7;
}
.layout_twelve .box--layout:nth-child(11) {
  grid-area: 4 / 7 / 5 / 13;
}
.layout_twelve .box--layout:nth-child(12) {
  grid-area: 5 / 1 / 6 / 13;
}

@media screen and (max-width: 992px) {
  .layout {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

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

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

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

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

  /* seven */

  .layout_seven .box--layout:nth-child(1) {
    grid-area: 1 / 1 / 2 / 3;
  }
  .layout_seven .box--layout:nth-child(2) {
    grid-area: 1 / 3 / 2 / 5;
  }
  .layout_seven .box--layout:nth-child(3) {
    grid-area: 1 / 5 / 2 / 7;
  }
  .layout_seven .box--layout:nth-child(4) {
    grid-area: 2 / 1 / 3 / 4;
  }
  .layout_seven .box--layout:nth-child(5) {
    grid-area: 2 / 4 / 3 / 7;
  }
  .layout_seven .box--layout:nth-child(6) {
    grid-area: 3 / 1 / 4 / 4;
  }
  .layout_seven .box--layout:nth-child(7) {
    grid-area: 3 / 4 / 4 / 7;
  }

  /* nine */
  .layout_nine .box--layout:nth-child(-n + 9) {
    grid-area: auto;
  }

  /* eleven */
  .layout_eleven .box--layout:nth-child(1) {
    grid-area: 1 / 1 / 2 / 4;
  }
  .layout_eleven .box--layout:nth-child(2) {
    grid-area: 1 / 4 / 2 / 7;
  }
  .layout_eleven .box--layout:nth-child(3) {
    grid-area: 2 / 1 / 3 / 3;
  }
  .layout_eleven .box--layout:nth-child(4) {
    grid-area: 2 / 3 / 3 / 5;
  }
  .layout_eleven .box--layout:nth-child(5) {
    grid-area: 2 / 5 / 3 / 7;
  }
  .layout_eleven .box--layout:nth-child(6) {
    grid-area: 3 / 1 / 4 / 4;
  }
  .layout_eleven .box--layout:nth-child(7) {
    grid-area: 3 / 4 / 4 / 7;
  }
  .layout_eleven .box--layout:nth-child(8) {
    grid-area: 4 / 1 / 5 / 3;
  }
  .layout_eleven .box--layout:nth-child(9) {
    grid-area: 4 / 3 / 5 / 5;
  }
  .layout_eleven .box--layout:nth-child(10) {
    grid-area: 4 / 5 / 5 / 7;
  }
  .layout_eleven .box--layout:nth-child(11) {
    grid-area: 5 / 1 / 6 / 7;
  }

  /* twelve */

  .layout_twelve .box--layout:nth-child(1) {
    grid-area: 1 / 1 / 2 / 7;
  }
  .layout_twelve .box--layout:nth-child(2) {
    grid-area: 1 / 7 / 2 / 13;
  }
  .layout_twelve .box--layout:nth-child(3) {
    grid-area: 2 / 1 / 3 / 5;
  }
  .layout_twelve .box--layout:nth-child(4) {
    grid-area: 2 / 5 / 3 / 9;
  }
  .layout_twelve .box--layout:nth-child(5) {
    grid-area: 2 / 9 / 3 / 13;
  }
  .layout_twelve .box--layout:nth-child(6) {
    grid-area: 3 / 1 / 4 / 13;
  }
  .layout_twelve .box--layout:nth-child(7) {
    grid-area: 4 / 1 / 5 / 7;
  }
  .layout_twelve .box--layout:nth-child(8) {
    grid-area: 4 / 7 / 5 / 13;
  }
  .layout_twelve .box--layout:nth-child(9) {
    grid-area: 5 / 1 / 6 / 13;
  }
  .layout_twelve .box--layout:nth-child(10) {
    grid-area: 6 / 1 / 7 / 7;
  }
  .layout_twelve .box--layout:nth-child(11) {
    grid-area: 6 / 7 / 7 / 13;
  }
  .layout_twelve .box--layout:nth-child(12) {
    grid-area: 7 / 1 / 8 / 13;
  }
}

@media screen and (max-width: 768px) {
  .layout {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .layout_two,
  .layout_three,
  .layout_four,
  .layout_five,
  .layout_six,
  .layout_seven,
  .layout_eight,
  .layout_nine,
  .layout_ten,
  .layout_eleven,
  .layout_twelve {
    grid-template-columns: repeat(1, 1fr);
  }

  .layout_five .box--layout:nth-child(-n + 5),
  .layout_seven .box--layout:nth-child(-n + 7),
  .layout_eight .box--layout:nth-child(-n + 8),
  .layout_ten .box--layout:nth-child(-n + 10),
  .layout_eleven .box--layout:nth-child(-n + 11),
  .layout_twelve .box--layout:nth-child(-n + 12) {
    grid-area: auto;
  }
}