/* =========================================================
   HERO BANNER — 2500 × 1500
   ========================================================= */

   .hero {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 3;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #000;
}

/* =========================================================
   IMAGE
   ========================================================= */

.hero__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero__texture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero__texture img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	object-fit: cover;
	object-position: center center;

	opacity: 1;
	filter: none;
	transform: none;
}

/* =========================================================
   REMOVE ALL OVERLAYS
   ========================================================= */

.hero::before,
.hero::after,
.hero__backdrop::before,
.hero__backdrop::after,
.hero__texture::before,
.hero__texture::after {
	content: none !important;
	display: none !important;
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) {
	.hero {
		aspect-ratio: 5 / 3;
	}
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {
	.hero {
		aspect-ratio: 5 / 3;
	}
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
	.hero {
		aspect-ratio: 5 / 3;
	}

	.hero__texture img {
		object-fit: cover;
		object-position: center center;
	}
}