/* note: Original comp uses ::before and .before on different screen dimensions to achieve the red underline. No clue why */
/* for Great Things page */

/* Values below correspond to >= 768px */
@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 */
	}
}

/* Values below correspond to < 768px */
@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; /* contain prevents weird image cutoffs on smaller screens. original bg-size: cover */
	}
	
}