/* 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; 
	display: block;
    margin: 0 auto;
}

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

.row {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

/* attribute selector to give some margin between columns and apply styles to flex items */

[class*="col-"] {
	margin: 10px 2%;
	flex: 0 0 92%;
	text-align: center;
    padding: 20px;
}

/* 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: #A3CDD9;
	flex: 3;
}

.col-4 {
	background-color: #FFFCE6;
	flex: 4;
}

.col-5 {
	background-color: #A3CDD9;
	flex: 2;
}

/* Tablet Landscape Screen Sizes */
@media only screen and (min-width: 480px)  {
	
    .col-1, .col-3, .col-4, .col-5, .col-2, .col-6{
		flex: 0 0 44%;
	}
	.col-4 {
    	flex: 0 0 92%; 
	}
  
}
/* Desktop screen Sizes */
@media only screen and (min-width: 768px) {
  
  
 	.col-1 {
		flex: 0 0 20%;
	}
  
	.col-2 {
		flex: 0 0 44%;
	}

	.col-3 {
    	flex: 0 0 68%; 
  	}

	.col-6 {
		flex: 0 0 15%; 
	}
}

[class*="col-"] {
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius: 8px; 
    cursor: pointer;
}

[class*="col-"]:hover {
    filter: brightness(95%); 
    transform: translateY(-5px);
}

.col-1:hover, .col-3:hover, .col-5:hover {
    background-color: #92bdc9; 
}

.col-2:hover, .col-4:hover {
    background-color: #f5f0d0;
}