*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}
:root {--gap:30px;}


/*grid*/


.content-box {
    max-width: 1620px;
    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  
    {
        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%;
    }
    }