:root {
--gap: 5px;
}

.content-box,
.wide .wp-block-group__inner-container {
  max-width: 1672px;
  margin: 0 auto;
  padding: 0 var(--gap);
}
body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}


.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;
  gap: var(--gap);
  flex-wrap: wrap;
}

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

/* 1 */
.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);
}


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

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


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

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

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

/* 5 */
.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-9 > div,
  .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,
  .column-10 > div,
  .column-11 > div,
  .column-12 > 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: 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%;
  }

}

@media only screen and (max-width: 480px) {

  :root {
    --gap: 0px;
  }

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

}