<style type="text/css">
		.sbox{width: 24vw;height: 400px;float: left;display: grid;align-content: center;justify-content: center;background: #CCCCCC;}
		.card{width: 200px;height: 200px;border-radius: 30px;box-sizing: border-box;}
		.shadow{box-shadow: 15px 15px 25px rgb(165 165 165 / 20%), -15px -15px 25px rgb(223 223 223 / 50%);}
		.shadow:hover{box-shadow:inset 15px 15px 25px rgb(183 183 183 / 20%),inset -15px -15px 25px rgb(211 211 211 / 50%);}
		 
		.border{border: 8px solid #cdcdcd;}
				
		.bgd1{background: #333;}
		.bgd1 .shadow{box-shadow: 15px 15px 25px rgb(40 40 40), -15px -15px 25px rgb(60 60 60);}
		.bgd1 .shadow:hover{box-shadow:inset 15px 15px 25px rgb(40 40 40),inset -15px -15px 25px rgb(60 60 60);}
		.bgd1 .border{border:8px solid #353535}
		 
		.bgd2{background: navy;}
		.bgd2 .shadow{box-shadow: 15px 15px 25px rgb(0 0 88 / 46%), -15px -15px 25px rgb(48 84 185 / 25%);}
		.bgd2 .shadow:hover{box-shadow:inset 15px 15px 25px rgb(0 0 88 / 46%),inset -15px -15px 25px rgb(48 84 185 / 25%);}
		.bgd2 .border{border:8px solid #111189}
		
		
		.bgd3{background: coral;}
		.bgd3 .shadow{box-shadow: 15px 15px 25px rgb(247 95 71 / 56%), -15px -15px 25px rgb(251 224 144 / 20%);}
		.bgd3 .shadow:hover{box-shadow:inset 15px 15px 25px  rgb(247 95 71 / 56%),inset -15px -15px 25px  rgb(251 224 144 / 20%);}
		.bgd3 .border{border:8px solid #fb8357}
		
		.liner1{background: linear-gradient(135deg,coral,navy);}
		.liner1 .shadow{box-shadow: 15px 15px 25px coral, -15px -15px 25px navy;}
		.liner1 .shadow:hover{box-shadow:inset 15px 15px 25px  coral,inset -15px -15px 25px  navy;}
		
		.liner2{background: linear-gradient(135deg,coral,navy);}
		.liner2 .shadow{box-shadow: 15px 15px 25px navy, -15px -15px 25px coral;}
		.liner2 .shadow:hover{box-shadow:inset 15px 15px 25px  navy,inset -15px -15px 25px  coral;}
	</style>
	<div class="row">
		<div class="sbox">
			<div class="card  shadow"></div>
		</div>
		<div class="sbox bgd1">
			<div class="card  shadow"></div>
		</div>
		<div class="sbox">
			<div class="card  shadow"></div>
		</div>
		<div class="sbox bgd2">
			<div class="card  shadow"></div>
		</div>
	</div>
	<div class="row">
		<div class="sbox">
			<div class="card border shadow"></div>
		</div>
		<div class="sbox bgd1">
			<div class="card border shadow"></div>
		</div>
		<div class="sbox bgd3">
			<div class="card border shadow"></div>
		</div>
		<div class="sbox bgd2">
			<div class="card border shadow"></div>
		</div>
	</div>
	
	<div class="row">
		<div class="sbox liner1">
			<div class="card shadow"></div>
		</div>
		<div class="sbox liner2">
			<div class="card shadow"></div>
		</div>
	</div>