<div class="container measure-wide center fw3">
	<div class="header pv4">
		<h2 class="mt0 fw4 f5 mb0">Santiago, Chile</h2>
		<h1 class="mv0 fw4 f2">Kiara</h1>
	</div>
	<div class="trophies flex flex-column justify-around items-center ba b--black-40 bw1 br2 pa3">
		<img class="mb3" src="https://www.dropbox.com/s/pxnehrc69ve1se9/004-care.svg?raw=1" alt="care">
		<img class="mb3" src="https://www.dropbox.com/s/n2kc6kr322pp0wq/001-medal.svg?raw=1" alt="star">
		<img class="mb3" src="https://www.dropbox.com/s/fzxgnbwdbta0ip3/002-bone.svg?raw=1" alt="bone">
		<img class="mb3" src="https://www.dropbox.com/s/gjxrsw44cmqgf7a/006-pet-house.svg?raw=1" alt="pet house">
		<img class="mb3" src="https://www.dropbox.com/s/ldjxz3gir0sciqo/005-dog-food.svg?raw=1" alt="food">
		<img src="https://www.dropbox.com/s/vj2nnx5nlhm9udz/003-elizabethan-collar.svg?raw=1" alt="collar">
	</div>
	<div class="info flex pl3 ba b--black-40 bw1 br2">
		<dl class="flex flex-column justify-around">
			<div><dt class="ttu tracked f7 fw6 black-80 mb1">Gender</dt>
				<dd class="ml0">Feminine</dd>
			</div>
			<div><dt class="ttu tracked f7 fw6 black-80 mb1">Breed</dt>
				<dd class="ml0">Yorkshire</dd>
			</div>
			<div><dt class="ttu tracked f7 fw6 black-80 mb1">Age</dt>
				<dd class="ml0">8 Years</dd>
			</div>
			<div><dt class="ttu tracked f7 fw6 black-80 mb1">Family</dt>
				<dd class="ml0">Henriquez</dd>
			</div>
		</dl>
	</div>
	<div class="photo br2">
		<img src="https://www.dropbox.com/s/qpvv9rkvtbpw3p0/kiaraYyo.jpg?raw=1" alt="Kiara and me" class='br2'>
	</div>
	<div class="bio bg-purple pa3 br2">
		<p class="lh-copy f5 white mv0">Kiara enjoys long naps on the beach (or any other place, really, she's not very demanding on that matter). Likes to to sunbath a lot. She's friendly with other dogs and very patient. She's a furry, chubby princess.</p>
	</div>
</div>

.container * {
	// outline: 1px solid red;
}

body {
	font-family: 'Montserrat', sans-serif
}

img {
	display: block;
}

.container {
	margin-top: 32px;
	margin-bottom: 32px;
	display: grid;
	grid-template-columns: 100px 1fr 1fr 150px;
	grid-template-rows: repeat(3, minmax(100px, max-content));
	grid-gap: 16px;
	grid-template-areas: 'h h h i'
		                    't p p i'
		                    't b b b'
}

.header {
	grid-area: h;
}
.trophies {
	grid-area: t;
	img {
		width: 36px;
	}
}
.info {
	grid-area: i;
}
.photo {
	grid-area: p;
}
.bio {
	grid-area: b;
}

// From: https://medium.com/deemaze-software/css-grid-layout-crossed-sections-fca9e956e725