/* CSS Document */

	.hero-bg--brand {
		background-image: url("../img/homelss-banner.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.hero--brand .hero-overlay {
		background: linear-gradient(
			to bottom,
			rgba(26, 58, 107, 0.85),
			rgba(14, 30, 70, 0.97)
		);
		clip-path: none;
		-webkit-mask-image: linear-gradient(115deg, #000 60%, transparent 60%);
		        mask-image: linear-gradient(115deg, #000 60%, transparent 60%);
	}
	@media (max-width: 768px) {
		.hero--brand .hero-overlay {
			-webkit-mask-image: linear-gradient(115deg, #000 72%, transparent 72%);
			        mask-image: linear-gradient(115deg, #000 72%, transparent 72%);
		}
	}

	/* Single-column row cards: photo to the side, natural proportions (no stretch/crop) */
	.card--row > .card__img,
	.card--row > .card__media {
		flex: 0 0 34%;
		width: 34%;
		align-self: center;
	}
	.card--row .card__img {
		height: auto;
		max-height: 220px;
		object-fit: contain;
		background: #fff;
		padding: 1.4rem;
	}

	/* image wrapped in a link: size the wrapper, image fills it */
	.card--row > .card__media { display: block; }
	.card--row .card__media .card__img { width: 100%; }
	@media (max-width: 670px) {
		.card--row > .card__img,
		.card--row > .card__media {
			flex-basis: auto;
			width: 100%;
		}
		.card--row .card__img { max-height: 200px; }
	}

	/* Red heart shape wrapping the word HEART in the intro heading */
	.heart-word {
		display: inline-block;
		position: relative;
		color: #fff;
		font-weight: 900;
		line-height: 1;
		padding: 0.85em 1.7em 1.6em;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath fill='%23c4262e' d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	}