.poster.container
	.when friday<br>december 4 1987<br>8pm show
	.who with<br>social distortion<br>and opal
	.where hollywood paladium<br>6215 sunset blvd<br>los angeles, california
	h1.title the jesus<br>and mary chain
	.hero
	
	
a(href="http://print-process.com/product/?product-id=902&selected-tag=87") A recreation of this cool print piece using only css

$color-a: #d1d2d4; /*grey*/
$color-b: #000110; /*black*/
$color-c: #ee3124; /*red*/
$color-d: #008ec7; /*blue*/

body{
	color: $color-b;
	font: 400 1.6vw/1.4em 'Open Sans', sans-serif;
	
	*{
		box-sizing: border-box;
	}
	
	a{
		color: $color-d;
		display: block;
		font-size: 16px;
		line-height: 1.4em;
		margin: 5vw auto 5vw;
		text-align: center;
		width: 75vw;
	}
}


.poster{
	background: $color-a;
	box-shadow: 0 1vw 2vw -1vw $color-b;
	height: 105vw;
	margin: 5vw auto 5vw;
	overflow: hidden;
	padding: 2vw;
	width: 75vw;
}

.container{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 8vw 22vw 75vw;
	
	div{
		padding: .5em;
	}
}

.when{
	grid-column: 1 / span 1;
  grid-row: 1 / 2;
}

.who{
	grid-column: 2 / span 1;
  grid-row: 1 / 2;
}

.where{
	grid-column: 4 / span 1;
  grid-row: 1 / 2;
	text-align: right;
}

.title{
	font-size: 4em;
	font-weight: 700;
	grid-column: 1 / span 5;
  grid-row: 2 / 3;
	line-height: 1.2em;
}

.hero{
	border: 18vw solid $color-c;
	border-radius: 50%;
	grid-column: 1 / span 5;
	height: 70vw;
	justify-self: center;
	position: relative;
	width: 70vw;
	
	&:after{
		mix-blend-mode: multiply;
		border: 18vw solid $color-d;
		border-radius: 50%;
		content: '';
		display: block;
		height: 100%;
		justify-self: center;
		position: absolute;
		left: 9vw;
		top: -18vw;
		width: 100%;
	}
}