/*
 * Canada Strong thematic
 * Wrap the page content in .canada-strong. Layout and spacing are done with the
 * WET/GCWeb utility classes, only the colours and patterns below are themed.
 */

/* Hero, the fade over the image is part of the image itself */
.canada-strong .hero {
	background-position: center right;
}

/* Title bar */
.canada-strong .title-bar {
	background-color: #63221f;
	color: #fff;
	padding: 10px 16px;
}

/* Audience card */
.canada-strong .card-audience {
	background-color: #63221f;
	color: #fff;
}

.canada-strong .card-audience img {
	display: block;
	margin-bottom: 15px;
}

.canada-strong .card-audience h3 {
	border-bottom: 6px solid #a62a1e;
	border-image: linear-gradient(to right, #a62a1e 72px, transparent 72px);
	border-image-slice: 1;
	border-width: 0 0 6px 0;
	color: #fff;
	margin-top: 0;
	padding-bottom: 6px;
}

.canada-strong .card-audience a {
	color: #fff;
}

/* Support card */
.canada-strong .card-support {
	border-color: #c6cace;
}

.canada-strong .card-support img {
	background-color: #f5f7fc;
	border-radius: 50%;
	display: block;
	margin-bottom: 14px;
}

.canada-strong .card-support h3 {
	margin-top: 0;
}

/* End of page promotion */
.canada-strong .end-page-promo {
	background-color: #1a2838;
	border-radius: 5px;
	color: #fff;
	column-gap: 24px;
	display: grid;
	grid-template-columns: 78px 1fr;
	padding: 20px 24px;
}

.canada-strong .end-page-promo img {
	align-self: center;
	background-color: #fff;
	border-radius: 50%;
	grid-row: 1 / span 3;
	height: 78px;
	padding: 9px;
	width: 78px;
}

.canada-strong .end-page-promo h2 {
	color: #fff;
	font-size: 1.8125rem;
	margin-bottom: 4px;
	margin-top: 0;
}

.canada-strong .end-page-promo p {
	margin-bottom: 0;
}

.canada-strong .end-page-promo p:last-child {
	margin-top: 15px;
}

.canada-strong .end-page-promo a {
	color: #fff;
}

/* Banner (maroon panel with an image, used on sub pages) */
.canada-strong .support-banner {
	background-color: #63221f;
	border-color: #63221f;
}

.canada-strong .support-banner h1,
.canada-strong .support-banner h2 {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.canada-strong .end-page-promo img {
		align-self: start;
	}
}

@media screen and (max-width: 479px) {
	.canada-strong .end-page-promo {
		display: block;
	}

	.canada-strong .end-page-promo img {
		margin-bottom: 16px;
	}
}