/* Photo Feature-2 Column edits.
Original comp uses ::before and .before on different screen dimensions to achieve the red underline. No clue why */

@media screen and (min-width: 768px) {
	
	.c--promo-photo-2col .text-container .f--sub-title h3 {
		font-size: 2.5rem; /* original font-size: 3.5rem */
	}
	
	.c--promo-photo-2col .text-container .f--sub-title h3::before {
		height: 0.3375rem; /* original height = 0.9375rem */
		max-width: 97%; /* original width = 100% */
		bottom: -0.1625rem; /* original bottom = -0.0625rem */
		background-color: #C03; /* original bg-color: #EBB600 */
	}
	
	.c--promo-photo-2col .text-container .f--sub-title h3 .before {
		height: 0.3375rem; /* original height = 0.9375rem */
		max-width: 97%; /* original width = 100% */
		bottom: -0.125rem; /* original bottom = 0.125rem at min-width: 1200px */
		background-color: #C03; /* original bg-color: #EBB600 */
	}
}

@media screen and (max-width: 767px) {
	
	.c--promo-photo-2col .text-container .f--sub-title h3::before {
		background-color: #C03; /* original bg-color: #EBB600 */
	}
	.c--promo-photo-2col .profile-image-wrapper .image-container {
		background-size: contain !important; /* original bg-size: cover */
	}
	
}

/* Centers headers for the first FS only based on component order on page */

.cl--landing-marketing-component-list section:nth-child(6) .cards-list {
	text-align: center; /* centers both header and paragraph text */
}

/* Fix for intentional "heading without text" accessibility issue */
.cl--landing-marketing-component-list section:nth-child(6) .f--section-title h2 {
	visibility: hidden;
}

.c--promo-photo-2col .inner-wrapper > .f--section-title h2, .c--promo-photo-2col .profile-image-wrapper-inner > .f--section-title h2 {
	visibility: hidden;
}