/* ---------- Benefits of Black Tea page ---------- */
.er-benefits-title {
	color: #fff;
}

/* Dark-green variant of the shared .er-info-card (Packaging uses the light
   white-card version; this page's cards sit on the dark section instead). */
.er-info-cards--dark .er-info-card {
	background: var(--er-dark-green);
}
.er-info-cards--dark .er-info-card h3 {
	color: #fff;
	font-weight: 400;
}
.er-info-cards--dark .er-info-card p {
	color: #fff;
	font-size: 16px;
}

/* Cards get a visible container (border) and turn light mint on hover,
   matching production. */
#er-benefitsblacktea .er-info-cards--dark .er-info-card {
	border: 1px solid var(--er-sage);
	padding: 60px 40px;
	transition: background-color 0.25s ease, color 0.25s ease;
}
#er-benefitsblacktea .er-info-cards--dark .er-info-card h3,
#er-benefitsblacktea .er-info-cards--dark .er-info-card p {
	transition: color 0.25s ease;
}
#er-benefitsblacktea .er-info-cards--dark .er-info-card:hover {
	background: var(--er-mint);
}
#er-benefitsblacktea .er-info-cards--dark .er-info-card:hover h3 {
	color: #111111;
}
#er-benefitsblacktea .er-info-cards--dark .er-info-card:hover p {
	color: #7A7A7A;
}
@media (max-width: 600px) {
	#er-benefitsblacktea .er-info-cards--dark .er-info-card {
		padding: 40px 28px;
	}
}

/* Hero + "Make it Personalized" images: match production's taller boxes so
   neither photo is cropped under the default 400px/center-position sizing. */
#er-benefitsblacktea .er-benefits-hero-image {
	min-height: 560px;
	background-position: 50% 0%;
}
#er-benefitsblacktea .er-benefits-personalized-image {
	min-height: 560px;
	background-position: 50% 100%;
}
@media (max-width: 900px) {
	#er-benefitsblacktea .er-benefits-hero-image,
	#er-benefitsblacktea .er-benefits-personalized-image {
		min-height: 250px;
	}
}

/* "We are not just selling tea. We are elevating a legacy." tagline
   section, matching production's mint band between the personalized
   section and the feature marquee. */
#er-benefitsblacktea .er-benefits-tagline {
	padding-top: 90px;
	padding-bottom: 90px;
}
#er-benefitsblacktea .er-benefits-tagline__text {
	color: var(--er-dark-green);
	font-size: 50px;
	line-height: 1.15;
}
@media (max-width: 600px) {
	#er-benefitsblacktea .er-benefits-tagline {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	#er-benefitsblacktea .er-benefits-tagline__text {
		font-size: 32px;
	}
}