*, *:before, *:after {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
}
.row {
    display: flex;
    gap: 40px;

}

.vertical-center {
    align-items: center;
}
.offset-left {
    padding-left: calc((100vw - 1622px) / 2);
    padding-right: 2rem;
}
@media only screen and (max-width: 1672px) {
    .offset-left {
        padding-left: 40px;
        padding-right: 40px;
    }
}

.no-gap {
    --gap: 0px;
}

:root {
    --gap: 40px;
}


/* grid */ 
.container {
    max-width: 1672px;
    margin: 0 auto;
    padding: 0 40px;
}
.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: 50%;
}
.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: 480px) and (max-width: 768px) {
	:root {
        --gap: 15px;
    }
   
    .column-3 > div, 
    .column-4 > div, 
    .column-5 > div {
        width: calc((100% - (1 * var(--gap))) / 2);
    } 
    .column-4 > div, 
    .column-5 > div {
        width: 100%;
    } 

    .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 (min-width: 769px) and (max-width: 1200px) {
	
.container {
    padding: 0 40px;
}
.column-4 > div, 
    .column-5 > div {
        width: calc((100% - (1 * var(--gap))) / 2);
    } 
	.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 (max-width: 480px) {
    :root {
        --gap: 15px;
    }
    .column-2 > div,
    .column-3 > div {
        width: 100%;
    }
    .column-4 > div, 
    .column-5 > div,  
    .column-6 > div {
        width: 100%;
    }
    .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) {
    .container {
        padding:0 15px;
    }
    .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%;
    }
}