.wrapper{
	position:relative;
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	width:100%;
	height:100vh;
	text-align:center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

h1{
	width:90%;
	margin:0 auto 10px;
	color:#1A88B4;
}
h1 img{
	width:100%;
}
h1 span{
	color:#787878;
}
h2{
	margin:0 auto 30px;
	color:#1A88B4;
	font-weight:600;
	text-align:center;
}
ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	width:96%;
 	max-width:1440px;
	margin:30px auto 30px;
 }
ul li{
	position:relative;
	width:24.5%;
	aspect-ratio: 1 / 1;
	margin:0 0 25px;
	background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(242,242,242,0.8) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(242,242,242,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(242,242,242,0.8) 100%); 
	border:1px solid #efefef;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
ul::after{
	content:"";
	width:24.5%;
}
ul li:first-child{
	border:none;
	background:#fff;
}

ul li div{
	position:absolute;
	top: 4vw;
	left:50%;
	width:88%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	text-align:left;
}
ul li:first-child div{
	top: 50%;
	-webkit-transform: translateX(-50%), translateY(-50%);
	transform: translate(-50%,-50%);
	text-align:center;
}
ul li:last-child div{
	text-align:center;
}

ul li a{
	color:#1A88B4;
}

@media screen and (max-width: 750px) {
	.wrapper{
		display:block;
		height:auto;
		padding:0 0 40px;
	}
	h2{
		margin:0 auto 15px;
	}
	ul li{
		width:100%;
		aspect-ratio: 4 / 3;
		margin:0 0 10px;
	}
	ul li:first-child{
		aspect-ratio: 4 / 5;
	}
	ul li div{
		top: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}
}