/* Border box declaration 
https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
}
/* inherit border-box on all elements in the universe and before and after
 */
*, 
*:before, 
*:after {
  box-sizing: inherit;
}

body {
	font-family: Arial, Geneva, sans-serif;
}
a {
	color: #2772B0;
}
.wrapper {
	width: 97%;
	max-width: 1200px;
	margin: 0 auto;
	float: none;
	background-color: #fff;
}

div img {
	width: 100%;
	max-width: 225px; 
}

/* grid system -- mobile first! */
/* flex contatiner */

.row {
	display: flex;
	flex-flow: row wrap;
	gap: 4%;
}


/* I commented this out and added more robust option (gap) to the parent container
/* attribute selector to give some margin between columns and apply styles to flex items */
/* [class*="col-"] {
	margin-left: 4%;
	flex: 0 0 92%;
} */


/* Add background colors to see how much space each column is taking */

.col-1 {
	background-color: #A3CDD9;
}

.col-2 {
	background-color: #FFFCE6;
}

.col-3 {
	background-color: #FFE6E6;
}
.col-4 {
	background-color: #4d91c9;
}
.col-5 {
	background-color: antiquewhite;
}
.col-6 {
	background-color: cadetblue;
}

.col-4 {
	flex: 1
  }

/* Tablet Landscape Screen Sizes */
@media only screen and (min-width: 480px)  {
	
  .col-1,
  .col-2{
		flex: 0 0 48%;
	}
  .col-3 {
	flex: 0 0 100%;
  }
  .col-5 {
	flex: 0 0 48%;
  }
  .col-5:nth-child(2) {
	order: -1;
	flex: 0 0 100%;
  }
  
  .col-6 {
	flex: 1;
  }
}
/* Desktop screen Sizes */
@media only screen and (min-width: 768px) {
  
	/* This way is easier to calculate the ratio between components */
 	.col-1 {
		flex: 1;
	}
  

	.col-2 {
		flex: 1;
	}

	.col-3:first-child {
		flex: 0 1 225px;
	}
	.col-3:last-child {
		flex: 1
	}

	.col-4 {
		flex: 1;
	}

	.col-5 {
		flex: 1;
	}
	
	.col-5:nth-child(2){
		order: 0;
		flex: 2;
	}
	.col-6 {
		flex: 2;
	}
	.col-6:nth-child(2){
		flex: 1;
	}

}