/* Base Styles  / Mobile View */

body {
	background-color: #F3F4F6;
	font-size: 18px;
	line-height: 2rem;
	font-family: 'Source Sans Pro', Sans-Serif;
	color: #26126a;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: bold;
}

h1 {
	margin-bottom: 1rem;
	font-size: 3rem;
	line-height: 3.5rem;
}

h2 {
	font-size: 2rem;
	line-height: 2.5rem;
}

h3 {
	font-size: 1.5rem;
	line-height: 2rem;
}

a:link, a:visited {
	border-bottom: 2px solid #9D174D;
	color: #EC4899;
	text-decoration: none;
	transition: color .75s ease;
}

a:hover {
	color: #9D174D;
	transition: color .2s ease;
}

code {
	box-decoration-break: clone;
	padding: .1rem .3rem .2rem;
	border-radius: .2rem;
	font-family: 'Source Code Pro', mono;
	font-size: 1rem;
	color: #EC4899;
	word-wrap: break-word;
}

.small, .small code {
	font-size: .8em;
}

.small code {
	padding: .5rem .15rem .1rem;
}

.wrapper {
	width: 90%;
	margin: 0 auto;
	padding: 2rem 0 2rem 0;
}

.card {
	margin: 1.5rem auto;
	padding: 1rem 1.5rem 1rem 1.5rem;
	background: #26126a;
	border-radius: .5rem;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
	color: #F5F3FF;
}

.card:nth-of-type(3n+1) {
	background: #fff;
	color: #26126a;
}

.card p {
	color: #D1D5DB;
}

.card:nth-of-type(3n+1) p {
	color: #6B7280;
}

/* Tablet View */

@media (min-width: 768px) {

	body {
		width: 80%;
		margin: 0 auto;
	}

	h1 {
		text-align: center;
	}

}


/*Desktop View */

@media (min-width: 1250px) {

	.wrapper:not(.info) {
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: space-evenly;
	}
	
	.info {
		width: 65%;
		margin-left: 5%;
	}
	
	header {
		width: 100%;
	}
	
	.card {
		flex-shrink: 1;
		flex-basis: 42%;
	}
	
	.card:nth-of-type(odd) {
		margin-left: 0;
	}
	
	.card:nth-of-type(even) {
		margin-right: 0;
	}

}