.highlights{overflow:hidden; padding: 55px 0; background-image: linear-gradient(aliceblue, white);}
.highlights h2{color:#00aeef;}
.highlights .center{}
.highlights .holder{display:flex; flex-wrap: wrap; text-align:center; padding: 0;}
.highlights .item{border-radius:20px; overflow:hidden; display: inline-block; flex: 1; aspect-ratio: 1; position: relative; transition: all 0.4s ease-in-out; margin: 25px;}
.highlights .item:first-of-type {margin-left: 0;}
.highlights .item:last-of-type {margin-right: 0;}
.highlights .item picture{display:block; position: absolute; top: 0px; left:0px; bottom: 0px; right: 0px; transition: 0.7s;}
.highlights .item picture *{opacity: 0.1; height:100%; width:100%; object-fit: cover; overflow:hidden; }
.highlights .item span{font-size: 1.5em; line-height: 1.4; font-weight:bold; padding: 0 0 15px 0; display:block;}
.highlights .item span a{}
.highlights .item p{z-index: 100; position:absolute; top: 25px; left:0; width: calc(100% - 50px); padding: 0 25px; display:block;}

@media only screen and (min-width: 1500px) {
	.highlights .item:hover{transform: scale(1.05); }
	.highlights .item:hover picture{transform: scale(1.1); }
}

@media only screen and (max-width:1250px) {
	.highlights .item{margin: 10px;}
	.highlights .item span{font-size: 1.1em; width: calc(100% - 30px); padding: 0px 15px; bottom: 15px;}
}

@media only screen and (max-width: 1000px) {
	.highlights .item, .highlights .item:first-of-type, .highlights .item:last-of-type{flex: calc(50% - 20px);}
	.highlights .item:nth-child(odd){margin-left: 0;}
	.highlights .item:nth-child(even){margin-right: 0;}
}

@media only screen and (max-width: 500px) {
	.highlights{padding: 20px 0;}
	.highlights .holder{padding:0;}
	.highlights .item, .highlights .item:first-of-type, .highlights .item:last-of-type{flex: 100%; margin: 20px 0;}
	.highlights .item span{font-size: 1.4em;}
}