@media only screen {
	.card-wrapper {
		position: relative;
		padding-top: 16px;
		padding-bottom: 16px;
	}
	.card-wrapper .intro {
		margin-bottom: 15px;
	}
	.card-wrapper h2 {
		margin: 16px;
		font-size: 32px;
		text-decoration: none;
		color: #002252;
	}
	.card-wrapper .intro a {
		display: block;
		padding: 20px;
		text-transform: uppercase;
		color: white;
		background-color: #002252;
	}
	.card-wrapper .intro a.view-all {
		font-weight: 700;
	}
	.card-wrapper .card {
		width: 100%;
		margin-bottom: 15px;
		background-color: #002252;
	}
	.card-wrapper .card .card-inner {
		padding: 30px 20px;
	}
	.card-wrapper .card h3 {
		margin-top: 0;
		font-size: 28px;
		color: white;
	}
	.card-wrapper .card p {
		color: white;
	}
	.card-wrapper .card a.card-link {
		display: block;
		margin-top: 15px;
		font-weight: 700;
		text-transform: uppercase;
		color: white;
	}
}

@media (min-width: 64.063em) {
	.card-wrapper {
		max-width: calc(100% - 32px);
		margin: 0 auto;
	}
	.card-wrapper h2 {
		margin: 0;
	}
	.card-wrapper .intro a {
		padding-left: 0;
		color: #002252;
		background-color: transparent;
	}
	.card-wrapper .cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.card-wrapper .card {
		display: flex;
		width: 49%;
		box-sizing: border-box;
	}
	.card-wrapper .card .card-inner {
		flex: 1 1 auto;
		border: 1px solid black;
		padding: 40px;
	}
	.card-wrapper .card:nth-child(odd) {
		padding-left: 0;
	}
	.card-wrapper .card:nth-child(even) {
		padding-right: 0;
	}
}

@media (min-width: 73em) {
	.card-wrapper {
		max-width: 100%;
	}
}