/**
 * Full Width Image with Text Panel Styles
 *
 * Hero-style panel with background image and overlaid text
 *
 * Dependencies: ssa-base
 * Extracted from: styles.css lines 229-260, responsive rules from 768px, 480px
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.full-width-image-with-text-panel .content {
	padding-top: 85px;
	padding-bottom: 85px;
	position: relative;
}

.full-width-image-with-text-panel .content h3 {
	color: var(--white);
	font-size: 72px;
	font-weight: 700;
	letter-spacing: -2.57px;
	line-height: 72px;
	margin-bottom: 28px;
	max-width: 570px;
}

.full-width-image-with-text-panel .content h4 {
	color: var(--white);

	/* font-family handled by utility class */
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 32px;
	margin-bottom: 37px;
}

.full-width-image-with-text-panel .content .button {
	background-color: var(--brand-highlight);
	color: var(--black);
	margin: var(--space-0);
}

/* ==========================================================================
   Responsive: Tablet (768px and below)
   ========================================================================== */

@media (max-width: 768px) {
	.full-width-image-with-text-panel .content {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* ==========================================================================
   Responsive: Mobile (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
	.full-width-image-with-text-panel .content {
		min-height: 300px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.full-width-image-with-text-panel .content .text {
		padding: var(--space-0);
		position: absolute;
		bottom: 10%;
		width: calc(100% - 44px);
	}

	.full-width-image-with-text-panel .content h3 {
		font-size: 32px;
		line-height: 36px;
		letter-spacing: 0;
	}

	.full-width-image-with-text-panel .content h4 {
		display: none;
	}
}