/* LAYOUT */
/* sizes */
:root {
	--col: 6.09375%;
	--col-2: 13.85416%;
	--col-3: 21.61457%;
	--col-4: 29.37498%;
	--col-5: 37.13539%;
	--col-6: 44.8958%;
	--col-7: 52.65621%;
	--col-8: 60.41662%;
	--col-9: 68.17703%;
	--col-10: 75.93744%;
	--col-11: 83.69785%;
	--col-12: 91.45826%;
	--gut: 1.66666%;
	--side: 4.27083%;
	--base: 32px;	
	
	--colm: 19.86666%;
	--colm-2: 43.7332%;
	--colm-3: 67.5998%;
	--colm-4: 91.4664%;
	--gutm: 4%;
	--sidem: 4.266666%;
	--basem: 16px;	
}

/* base */
img {
	width: 100%;
}

.flex {
	display: -webkit-box; 
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    &:not(.nowrap) {
		flex-wrap: wrap;
	}
}

.flex {	
	&.j-sb {
	    justify-content: space-between;
    }
    
    &.j-sa {
		justify-content: space-around;
	}
	
	&.j-fe {
		justify-content: flex-end;
	}
	
	&.j-c {
		justify-content: center;
	}
	
	&.a-fs {
		align-items: flex-start;
	}
	
	&.a-e {
		align-items: flex-end;
	}
	
	&.a-c {
		align-items: center;
	}
	
	&.a-b {
		align-items: baseline;
	}
	
    &.d-rr {
	    flex-direction: row-reverse;
    }
    
    &.d-c {
		flex-direction: column;
	}
	
	&.d-cr {
		flex-direction: column-reverse;
	}
}

.wrapped {
	width: 92.08333%;
	margin: 0 auto;
}

section, .cont {
	width: 100%;
	margin: 0 auto;
}

/* Mobile */
@media screen and (max-width : 1023px) {
	.flexm, .flex {
		display: -webkit-box; 
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    
	    &:not(.nowrap) {
			flex-wrap: wrap;
		}
		
		&.m-j-sb {
		    justify-content: space-between;
	    }
	    
	    &.m-j-sa {
			justify-content: space-around;
		}
		
		&.m-j-fe {
			justify-content: flex-end;
		}
		
		&.m-j-c {
			justify-content: center;
		}
		
		&.m-a-fs {
			align-items: flex-start;
		}
		
		&.m-a-e {
			align-items: flex-end;
		}
		
		&.m-a-c {
			align-items: center;
		}
		
		&.m-a-b {
			align-items: baseline;
		}
		
	    &.m-d-rr {
		    flex-direction: row-reverse;
	    }
	    
	    &.m-d-c {
			flex-direction: column;
		}
		
		&.m-d-cr {
			flex-direction: column-reverse;
		}
	}
	
	section, .cont {
		.m-1 {
			width: var(--colm);
			
			&.side {
				width: calc( var(--colm) + var(--sidem) );
			}
			
			&.gut {
				width: calc( var(--colm) + var(--gutm) );
			}
			
			&.guts {
				width: calc( var(--colm) + (var(--gutm) * 2) );
			}
		}
		
		.m-2 {
			width: var(--colm-2);
			
			&.side {
				width: calc( var(--colm-2) + var(--sidem) );
			}
			
			&.gut {
				width: calc( var(--colm-2) + var(--gutm) );
			}
			
			&.guts {
				width: calc( var(--colm-2) + (var(--gutm) * 2) );
			}
		}
		
		.m-3 {
			width: var(--colm-3);
			
			&.side {
				width: calc( var(--colm-3) + var(--sidem) );
			}
			
			&.gut {
				width: calc( var(--colm-3) + var(--gutm) );
			}
			
			&.guts {
				width: calc( var(--colm-3) + (var(--gutm) * 2) );
			}
		}
		
		.m-full {
			width: var(--colm-4);
		}
		
		.spm-left {
			margin-left: var(--sidem);
		}
		
		.spm-right {
			margin-right: var(--sidem);
		}
	}
}

/* Desktop */
@media screen and (min-width : 1024px) {
	.flexd, .flex {
		display: -webkit-box; 
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	    
	    &:not(.nowrap) {
			flex-wrap: wrap;
		}
	
		&.d-j-sb {
		    justify-content: space-between;
	    }
	    
	    &.d-j-sa {
			justify-content: space-around;
		}
		
		&.d-j-fe {
			justify-content: flex-end;
		}
		
		&.d-j-c {
			justify-content: center;
		}
		
		&.d-a-fs {
			align-items: flex-start;
		}
		
		&.d-a-e {
			align-items: flex-end;
		}
		
		&.d-a-c {
			align-items: center;
		}
		
		&.d-a-b {
			align-items: baseline;
		}
	    
	    &.d-d-rr {
		    flex-direction: row-reverse;
	    }
	    
	    &.d-d-c {
			flex-direction: column;
		}
		
		&.d-d-cr {
			flex-direction: column-reverse;
		}
	}
	
	section, .cont {
		.d-1 {
			width: var(--col);
			
			&.side {
				width: calc( var(--col) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col) + (var(--gut) * 2) );
			}
		}
		
		.d-2 {
			width: var(--col-2);
			
			&.side {
				width: calc( var(--col-2) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-2) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-2) + (var(--gut) * 2) );
			}
		}
		
		.d-3 {
			width: var(--col-3);
			
			&.side {
				width: calc( var(--col-3) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-3) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-3) + (var(--gut) * 2) );
			}
		}
		
		.d-4 {
			width: var(--col-4);
			
			&.side {
				width: calc( var(--col-4) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-4) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-4) + (var(--gut) * 2) );
			}
		}
		
		.d-5 {
			width: var(--col-5);
			
			&.side {
				width: calc( var(--col-5) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-5) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-5) + (var(--gut) * 2) );
			}
		}
		
		.d-6 {
			width: var(--col-6);
			
			&.side {
				width: calc( var(--col-6) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-6) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-6) + (var(--gut) * 2) );
			}
		}
		
		.d-7 {
			width: var(--col-7);
			
			&.side {
				width: calc( var(--col-7) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-7) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-7) + (var(--gut) * 2) );
			}
		}
		
		.d-8 {
			width: var(--col-8);
			
			&.side {
				width: calc( var(--col-8) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-8) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-8) + (var(--gut) * 2) );
			}
		}
		
		.d-9 {
			width: var(--col-9);
			
			&.side {
				width: calc( var(--col-9) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-9) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-9) + (var(--gut) * 2) );
			}
		}
		
		.d-10 {
			width: var(--col-10);
			
			&.side {
				width: calc( var(--col-10) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-10) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-10) + (var(--gut) * 2) );
			}
		}
		
		.d-11 {
			width: var(--col-11);
			
			&.side {
				width: calc( var(--col-11) + var(--side) );
			}
			
			&.gut {
				width: calc( var(--col-11) + var(--gut) );
			}
			
			&.guts {
				width: calc( var(--col-11) + (var(--gut) * 2) );
			}
		}
		
		.d-full {
			width: var(--col-12);
		}
		
		.sp-left {
			margin-left: var(--side);
		}
		
		.sp-right {
			margin-right: var(--side);
		}
	}
}