/* Card Grid */
.card-grid {
	margin-bottom: 2rem;
}
.card-grid__icon-wrapper {
	background-color: var(--navy);
	padding: 6px;
	height: 50px;
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 750px) {
	.card-grid__icon-wrapper {
		position: relative;
		flex-direction: column;
		background-color: var(--white);
		height: 120px;
		width: 100%;
		border: 2px solid var(--navy);
		border-radius: 8px;
		padding: 10px 10px 26px;
		overflow: hidden;
	}
}
.card-grid__icon-wrapper:hover {
	background-color: var(--navyLight);
}

@media screen and (min-width: 750px) {
	.card-grid__icon-wrapper::after {
		content: "";
		position: absolute;
		display: block;
		bottom: 0;
		left: 0;
		right: 0;
		height: 16px;
		background-color: var(--navy);
	}
}

.card-grid__item {
	cursor: pointer;
	display: flex;
	align-items: center;
	border: 2px solid var(--navy);
	border-radius: 8px;
	text-decoration: none;
}

@media (min-width: 750px) {
	.card-grid__item {
		flex-direction: column;
		border: none;
	}
}

.card-grid__item h3 {
	font-weight: var(--fontMedium);
	text-transform: uppercase;
	line-height: 1.2;
	font-size: 14px;
}
.card-grid__content {
	padding: 0 8px;
	flex: 1;
}
@media (min-width: 750px) {
	.card-grid__content {
		margin-top: 0.5rem;
		text-align: center;
	}
}

.card-grid__icon.style-svg {
	fill: var(--white);
	filter: invert(100%) brightness(2);
}
@media (min-width: 750px) {
	.card-grid__icon.style-svg {
		fill: var(--navyLight);
		filter: none;
	}
}
.card-grid__icon {
	width: 85%;
	height: auto;
}
@media screen and (min-width: 750px) {
	.card-grid__icon {
		width: 55%;
	}
}
/* Colours */

/* blue */
.card-grid__color--blue .card-grid__icon-wrapper {
	background-color: var(--blue);
}
@media (min-width: 750px) {
	.card-grid__color--blue .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--blue);
	}
}
.card-grid__item.card-grid__color--blue {
	border-color: var(--blue);
}
@media (min-width: 750px) {
	.card-grid__color--blue .card-grid__icon-wrapper::after {
		background-color: var(--blue);
	}
}
/* aqua */
.card-grid__color--aqua .card-grid__icon-wrapper {
	background-color: var(--aqua);
}
@media (min-width: 750px) {
	.card-grid__color--aqua .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--aqua);
	}
}
.card-grid__item.card-grid__color--aqua {
	border-color: var(--aqua);
}
@media (min-width: 750px) {
	.card-grid__color--aqua .card-grid__icon-wrapper::after {
		background-color: var(--aqua);
	}
}
/* orange */
.card-grid__color--orange .card-grid__icon-wrapper {
	background-color: var(--orange);
}
@media (min-width: 750px) {
	.card-grid__color--orange .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--orange);
	}
}
.card-grid__item.card-grid__color--orange {
	border-color: var(--orange);
}
@media (min-width: 750px) {
	.card-grid__color--orange .card-grid__icon-wrapper::after {
		background-color: var(--orange);
	}
}
/* pink */
.card-grid__color--pink .card-grid__icon-wrapper {
	background-color: var(--pink);
}
@media (min-width: 750px) {
	.card-grid__color--pink .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--pink);
	}
}
.card-grid__item.card-grid__color--pink {
	border-color: var(--pink);
}
@media (min-width: 750px) {
	.card-grid__color--pink .card-grid__icon-wrapper::after {
		background-color: var(--pink);
	}
}
/* purple */
.card-grid__color--purple .card-grid__icon-wrapper {
	background-color: var(--purple);
}
@media (min-width: 750px) {
	.card-grid__color--purple .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--purple);
	}
}
.card-grid__item.card-grid__color--purple {
	border-color: var(--purple);
}
@media (min-width: 750px) {
	.card-grid__color--purple .card-grid__icon-wrapper::after {
		background-color: var(--purple);
	}
}
/* green */
.card-grid__color--green .card-grid__icon-wrapper {
	background-color: var(--green);
}
@media (min-width: 750px) {
	.card-grid__color--green .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--green);
	}
}
.card-grid__item.card-grid__color--green {
	border-color: var(--green);
}
@media (min-width: 750px) {
	.card-grid__color--green .card-grid__icon-wrapper::after {
		background-color: var(--green);
	}
}
/* turquoise */
.card-grid__color--turquoise .card-grid__icon-wrapper {
	background-color: var(--turquoise);
}
@media (min-width: 750px) {
	.card-grid__color--turquoise .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--turquoise);
	}
}
.card-grid__item.card-grid__color--turquoise {
	border-color: var(--turquoise);
}
@media (min-width: 750px) {
	.card-grid__color--turquoise .card-grid__icon-wrapper::after {
		background-color: var(--turquoise);
	}
}
/* violet */
.card-grid__color--violet .card-grid__icon-wrapper {
	background-color: var(--violet);
}
@media (min-width: 750px) {
	.card-grid__color--violet .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--violet);
	}
}
.card-grid__item.card-grid__color--violet {
	border-color: var(--violet);
}
@media (min-width: 750px) {
	.card-grid__color--violet .card-grid__icon-wrapper::after {
		background-color: var(--violet);
	}
}
/* red */
.card-grid__color--red .card-grid__icon-wrapper {
	background-color: var(--red);
}
@media (min-width: 750px) {
	.card-grid__color--red .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--red);
	}
}
.card-grid__item.card-grid__color--red {
	border-color: var(--red);
}
@media (min-width: 750px) {
	.card-grid__color--red .card-grid__icon-wrapper::after {
		background-color: var(--red);
	}
}
/* gold */
.card-grid__color--gold .card-grid__icon-wrapper {
	background-color: var(--gold);
}
@media (min-width: 750px) {
	.card-grid__color--gold .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--gold);
	}
}
.card-grid__item.card-grid__color--gold {
	border-color: var(--gold);
}
@media (min-width: 750px) {
	.card-grid__color--gold .card-grid__icon-wrapper::after {
		background-color: var(--gold);
	}
}
/* brown */
.card-grid__color--brown .card-grid__icon-wrapper {
	background-color: var(--brown);
}
@media (min-width: 750px) {
	.card-grid__color--brown .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--brown);
	}
}
.card-grid__item.card-grid__color--brown {
	border-color: var(--brown);
}
@media (min-width: 750px) {
	.card-grid__color--brown .card-grid__icon-wrapper::after {
		background-color: var(--brown);
	}
}
/* blueMid */
.card-grid__color--blue-mid .card-grid__icon-wrapper {
	background-color: var(--blueMid);
}
@media (min-width: 750px) {
	.card-grid__color--blue-mid .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--blueMid);
	}
}
.card-grid__item.card-grid__color--blue-mid {
	border-color: var(--blueMid);
}
@media (min-width: 750px) {
	.card-grid__color--blue-mid .card-grid__icon-wrapper::after {
		background-color: var(--blueMid);
	}
}
/* greenDark */
.card-grid__color--green-dark .card-grid__icon-wrapper {
	background-color: var(--greenDark);
}
@media (min-width: 750px) {
	.card-grid__color--green-dark .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--greenDark);
	}
}
.card-grid__item.card-grid__color--green-dark {
	border-color: var(--greenDark);
}
@media (min-width: 750px) {
	.card-grid__color--green-dark .card-grid__icon-wrapper::after {
		background-color: var(--greenDark);
	}
}
/* navy */
.card-grid__color--navy .card-grid__icon-wrapper {
	background-color: var(--navy);
}
@media (min-width: 750px) {
	.card-grid__color--navy .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--navy);
	}
}
.card-grid__item.card-grid__color--navy {
	border-color: var(--navy);
}
@media (min-width: 750px) {
	.card-grid__color--navy .card-grid__icon-wrapper::after {
		background-color: var(--navy);
	}
}

/* Hover states */
.card-grid__item:hover {
	border-color: var(--navyLight);
}
.card-grid__item:hover h3 {
	color: var(--navyLight);
	text-decoration: underline;
}
.card-grid__item:hover .card-grid__icon-wrapper {
	background-color: var(--navyLight);
}
@media screen and (min-width: 750px) {
	.card-grid__item:hover .card-grid__icon-wrapper {
		background-color: var(--white);
		border-color: var(--navyLight);
	}
}
.card-grid__item.card-grid__color--navyLight:hover,
.card-grid__item.card-grid__color--aqua:hover,
.card-grid__item.card-grid__color--orange:hover,
.card-grid__item.card-grid__color--pink:hover,
.card-grid__item.card-grid__color--green:hover,
.card-grid__item.card-grid__color--turquoise:hover,
.card-grid__item.card-grid__color--violet:hover,
.card-grid__item.card-grid__color--red:hover,
.card-grid__item.card-grid__color--gold:hover,
.card-grid__item.card-grid__color--brown:hover,
.card-grid__item.card-grid__color--blue-mid:hover,
.card-grid__item.card-grid__color--green-dark:hover,
.card-grid__item.card-grid__color--purple:hover {
	border-color: var(--navyLight);
}

@media (min-width: 750px) {
	.card-grid__color--navyLight:hover .card-grid__icon-wrapper::after,
	.card-grid__color--aqua:hover .card-grid__icon-wrapper::after,
	.card-grid__color--orange:hover .card-grid__icon-wrapper::after,
	.card-grid__color--pink:hover .card-grid__icon-wrapper::after,
	.card-grid__color--green:hover .card-grid__icon-wrapper::after,
	.card-grid__color--turquoise:hover .card-grid__icon-wrapper::after,
	.card-grid__color--violet:hover .card-grid__icon-wrapper::after,
	.card-grid__color--red:hover .card-grid__icon-wrapper::after,
	.card-grid__color--gold:hover .card-grid__icon-wrapper::after,
	.card-grid__color--brown:hover .card-grid__icon-wrapper::after,
	.card-grid__color--blue-mid:hover .card-grid__icon-wrapper::after,
	.card-grid__color--green-dark:hover .card-grid__icon-wrapper::after,
	.card-grid__color--purple:hover .card-grid__icon-wrapper::after {
		background-color: var(--navyLight);
	}
}