@import "../../../assets/styles/scss/utilities/functions";
@import "../../../assets/styles/scss/utilities/variables";
@import "../../../assets/styles/scss/utilities/mixins";

.banner-full-img {
	opacity: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	padding: var(--banner-full-img-padding) 0;
	--banner-full-img-padding: 50px;

	@include media-breakpoint-up(xl) {
		--banner-full-img-padding: 90px;
		min-height: 550px;
	}

	@include media-breakpoint-up(xxl) {
		aspect-ratio: 144 / 55;
	}

	&:first-child {
		padding-top: calc(
			var(--banner-full-img-padding) + $header-height-desktop
		);
	}

	&__background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		object-fit: cover;

		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.7);
			z-index: 1;
		}
	}

	&__container {
		position: relative;
		z-index: 2;
	}

	&__wrapper {
		width: 530px;
		max-width: 100%;
	}

	h1,
	h2,
	h3 {
		margin-bottom: px-to-rem(12px);
	}
}