.row{
	width: 100%;
	max-width: 1326px;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
}

.col{
	flex-direction: column;
	display: flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	width: 100%;
	padding:0 18px;
}

@media screen and (min-width: 620px){
	.small-6{
		flex-basis: 50%;
		width: 50%;
	}
}

@media screen and (min-width: 820px){

	.medium-10{
		flex-basis: 83.3%;
		width: 83.3%;
	}
	.medium-7{
		flex-basis: 58.3%;
		width: 58.3%;
	}
	.medium-6{
		flex-basis: 50%;
		width: 50%;
	}
	.medium-4{
		flex-basis: 33.3%;
		width: 33.3%;
	}
	.medium-5{
		flex-basis: 41.6%;
		width: 41.6%;
	}
	.medium-2{
		flex-basis: 16.6%;
		width: 16.6%;
	}
	.medium-1{
		flex-basis: 8.3%;
		width: 8.3%;
	}
}

@media screen and (min-width: 992px){
	.large-1{
		flex-basis: 8.3%;
		width: 8.3%;
	}
	.large-2{
		flex-basis: 16.6%;
		width: 16.6%;
	}
	.large-3{
		flex-basis: 25%;
		width: 25%;
	}
	.large-4{
		flex-basis: 33.3%;
		width: 33.3%;
	}
	.large-5{
		flex-basis: 41.6%;
		width: 41.6%;
	}
	.large-6{
		flex-basis: 50%;
		width: 50%;
	}
	.large-7{
		flex-basis: 58.3%;
		width: 58.3%;
	}
	.large-8{
		flex-basis: 66.6%;
		width: 66.6%;
	}
	.large-9{
		flex-basis: 75%;
		width: 75%;
	}
	.large-10{
		flex-basis: 83.3%;
		width: 83.3%;
	}
	.large-11{
		flex-basis: 91.6%;
		width: 91.6%;
	}
}


@media screen and (min-width: 1326px){
	.giant-1{
		flex-basis: 8.3%;
		width: 8.3%;
	}
	.giant-2{
		flex-basis: 16.6%;
		width: 16.6%;
	}
	.giant-3{
		flex-basis: 25%;
		width: 25%;
	}
	.giant-4{
		flex-basis: 33.3%;
		width: 33.3%;
	}
	.giant-5{
		flex-basis: 41.6%;
		width: 41.6%;
	}
	.giant-6{
		flex-basis: 50%;
		width: 50%;
	}
	.giant-7{
		flex-basis: 58.3%;
		width: 58.3%;
	}
	.giant-8{
		flex-basis: 66.6%;
		width: 66.6%;
	}
	.giant-9{
		flex-basis: 75%;
		width: 75%;
	}
	.giant-10{
		flex-basis: 83.3%;
		width: 83.3%;
	}
	.giant-11{
		flex-basis: 91.6%;
		width: 91.6%;
	}
}