<div class="cb poster1">
	<p>conference<br>@NYC<br> <small>23/12</small><br><a href="javascript:;">read more</a>
	</p>
</div>

 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 .cb {
 	--w: 35vw;
 	--h: 40vw;
 	--b: 4vw;
 	--b2: calc(var(--b) * 2);
 	width: var(--w);
 	height: var(--h);
 	background: center/calc(var(--w) + var(--b2)) calc(var(--h) + var(--b2));
 	border: var(--b) solid transparent;
 	box-shadow: inset var(--w) 0 0 var(--tbgc), 0 0 0 calc(var(--b) / 2) white;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	margin: var(--b) auto;
 }
 
 .poster1 {
 	--tbgc: rgba(0, 120, 237, .5);
 	background-image: url("https://bit.ly/2eQBij2");
 	color: white;
 	font-size: 1rem;
 	line-height: 1.2rem;
 	text-align: center;
 }
 
 a:link {
 	color: #fff;
 }
 
 body {
 	margin: 0;
 }
 
 html {
 	background-color: #eee;
 	font-family: 'open sans';
 	font-size: 4vw;
 }
 
 a {
 	font-size: .4rem;
 }
 
 @media (orientation: portrait) {
 	.cb {
 		--w: 35vh;
 		--h: 40vh;
 		--b: 4vh;
 	}
 	html {
 		font-size: 4vh;
 	}
 }