<div class='album s'>
	<div class='half'></div>
	<div class='half used'>
		<div class='wrapper'>
			<div class='above'>
				<p class='bold'>Queens of the Stone Age</p>
			</div>	
			<div class='bar'>
				<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/RATED_R.svg/2000px-RATED_R.svg.png' />
			</div>
			<div class='below'>
				<p class='bold' style='margin-bottom: 0;'>RESTRICTED</p>
				<p class='small'>TO EVERYONE, <br/> EVERYWHERE, ALL THE TIME</p>
			</div>
		</div>
	</div>		
</div>	
*
	box-sizing: border-box

body
	widtH: 100%
	min-heighT: 100vh
	display: flex
	justify-content: center
	align-items: center
	background: linear-gradient(45deg, #CC222B, lighten(#CC222B, 15%))

.album
	font-family: 'Roboto', sans-serif
	widtH: 640px
	height: 640px
	background: #0088D6
	display: flex
	flex-direction: column
	box-shadow: 0px 0px 20px 10px rgba(white, 0.5)
	@media (max-width: 700px)
		width: 320px
		height: 320px
	.bold
		font-weight: bold
	.half
		width: 640px
		height: 320px
		color: white
		@media (max-width: 700px)
			width: 320px
			height: 160px
		&.used
			display: flex
			flex-direction: column
			align-items: center
			justify-content: center
			.wrapper
				widtH: 640px
				@media (max-width: 700px)
					width: 320px
				.above, .below
					text-align: center
					width: 150px
					max-width: 33.333%
					margin-left: calc(640px - 33.333% + 40px)
					font-size: 15px
					.small
						margin: 0
						font-size: 10px
						@media (max-width: 700px)
							font-size: 5px
					@media (max-width: 700px)
						width: 75px
						margin-left: calc(320px - 33.333% + 20px)
						font-size: 7.5px
				.bar
					padding: 10px
					padding-right: 40px
					width: 100%
					background: white
					display: flex
					align-items: center
					justify-content: flex-end
					img
						width: 100%
						max-width: 100px
					@media (max-width: 700px)
						padding-right: 20px
						img
							width: 50%
							max-width: 50px
			
	
View Compiled
Rerun