/**
 * Release 0.1.28: contextual cargo heroes and the USA flag prototype.
 *
 * These pages deliberately use a contained image layer instead of `cover`.
 * The complete cargo or flag therefore remains visible in the copy-free right
 * side at every desktop width; the navy surface fills any unused hero area.
 */

.et-hero-fit--contained .et-service-hero::before {
	background-color: var(--wp--preset--color--transit-navy, #0a2342) !important;
	background-image:
		linear-gradient(
			90deg,
			rgba(10, 35, 66, 0.99) 0%,
			rgba(10, 35, 66, 0.95) 35%,
			rgba(10, 35, 66, 0.76) 50%,
			rgba(10, 35, 66, 0.28) 68%,
			rgba(10, 35, 66, 0.04) 100%
		),
		var(--et-visual-image, none) !important;
	background-position: center, right center !important;
	background-repeat: no-repeat, no-repeat !important;
	background-size: cover, auto 100% !important;
}

@media (max-width: 47.99rem) {
	.et-hero-fit--contained .et-service-hero::before {
		background-image:
			linear-gradient(
				180deg,
				rgba(10, 35, 66, 0.98) 0%,
				rgba(10, 35, 66, 0.93) 55%,
				rgba(10, 35, 66, 0.66) 100%
			),
			var(--et-visual-image, none) !important;
		/* A smaller bottom-right layer keeps the complete subject inside a
		 * 320px viewport instead of clipping its left edge. */
		background-position: center, right bottom !important;
		background-size: cover, auto 66% !important;
	}
}