:root {
       --gap: 40px;
   }

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

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

   }