:root {
  --gap: 30px;
}
.content-box {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}
.row {
  display: flex;
  gap: var(--gap);
}
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.column-2 > div {
  width: calc((100% - (1 * var(--gap))) / 2);
}
.column-3 > div {
  width: calc((100% - (2 * var(--gap))) / 3);
}
.column-4 > div {
  width: calc((100% - (3 * var(--gap))) / 4);
}
.column-5 > div {
  width: calc((100% - (4 * var(--gap))) / 5);
}
.column-6 > div {
  width: calc((100% - (5 * var(--gap))) / 6);
}
.column-7 > div {
  width: calc((100% - (6 * var(--gap))) / 7);
}
.column-8 > div {
  width: calc((100% - (7 * var(--gap))) / 8);
}
.column-9 > div {
  width: calc((100% - (8 * var(--gap))) / 9);
}
.column-10 > div {
  width: calc((100% - (9 * var(--gap))) / 10);
}
.column-11 > div {
  width: calc((100% - (10 * var(--gap))) / 11);
}
.column-12 > div {
  width: calc((100% - (11 * var(--gap))) / 12);
}
.col-1-2 {
  flex-basis: calc(100% / 2);
}
.col-1-3 {
  flex-basis: calc(100% / 3);
}
.col-1-4 {
  flex-basis: calc(100% / 4);
}
.col-1-5 {
  flex-basis: calc(100% / 5);
}
.col-1-6 {
  flex-basis: calc(100% / 6);
}

.col-2-3 {
  flex-basis: calc(100% / 3 * 2);
}
.col-2-5 {
  flex-basis: calc(100% / 5 * 2);
}
.col-3-4 {
  flex-basis: calc(100% / 4 * 3);
}
.col-3-5 {
  flex-basis: calc(100% / 5 * 3);
}
.col-4-5 {
  flex-basis: calc(100% / 5 * 4);
}
.col-5-6 {
  flex-basis: calc(100% / 6 * 5);
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .column-5 > div,
  .column-6 > div,
  .column-7 > div,
  .column-8 > div,
  .column-9 > div {
    width: calc((100% - (3 * var(--gap))) / 4);
  }
  .column-10 > div,
  .column-11 > div,
  .column-12 > div {
    width: calc((100% - (4 * var(--gap))) / 5);
  }
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
  :root {
    --gap: 20px;
  }
  .column-3 > div,
  .column-4 > div,
  .column-5 > div {
    width: calc((100% - (1 * var(--gap))) / 2);
  }

  .column-6 > div,
  .column-7 > div,
  .column-8 > div,
  .column-9 > div {
    width: calc((100% - (2 * var(--gap))) / 3);
  }
  .column-10 > div,
  .column-11 > div,
  .column-12 > div {
    width: calc((100% - (2 * var(--gap))) / 3);
  }
}

@media only screen and (max-width: 480px) {
  :root {
    --gap: 15px;
  }
  .column-2 > div,
  .column-3 > div {
    width: 100%;
  }
  .column-4 > div,
  .column-5 > div,
  .column-6 > div {
    width: calc((100% - (1 * var(--gap))) / 2);
  }
  .column-7 > div,
  .column-8 > div,
  .column-9 > div,
  .column-10 > div,
  .column-11 > div,
  .column-12 > div {
    width: calc((100% - (2 * var(--gap))) / 3);
  }
}
@media only screen and (max-width: 768px) {
  .row {
    flex-wrap: wrap;
  }
  .col-1-2,
  .col-1-3,
  .col-1-4,
  .col-1-5,
  .col-1-6,
  .col-2-3,
  .col-2-5,
  .col-3-4,
  .col-3-5,
  .col-4-5,
  .col-5-6 {
    flex-basis: 100%;
  }
}