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

.callout-background-content-box-centered {
	opacity: 1;
	position: relative;
	display: flex;
	align-items: center;
	--callout-background-content-box-centered-padding: 300px 0 0 0;
	padding: var(--callout-background-content-box-centered-padding);
	color: $ui-foreground-primary-text-headings;

	@include media-breakpoint-up(xl) {
		--callout-background-content-box-centered-padding: 483px 0 0 0;
		min-height: 817px;
	}

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

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

	&__wrapper {
		max-width: 100%;
		background-color: $ui-background-primary;
		padding: 30px;

		@include media-breakpoint-up(lg) {
			padding: 80px 112px;
		}

		.wp-block-heading,
		p,
		strong {
			color: $ui-base-white;
		}
	}

	&:not(.alignfull) {
		--callout-background-content-box-centered-padding: 300px 0 60px 0;

		@include media-breakpoint-up(xl) {
			--callout-background-content-box-centered-padding: 423px 0 60px 0;
		}

		.callout-background-content-box-centered__wrapper {
			max-width: 100%;
			margin: 0 30px;

			@include media-breakpoint-up(xl) {
				width: 83.3333%;
				margin: 0 auto;
			}

			@include media-breakpoint-up(xxl) {
				width: 1095px;
			}
		}
	}
}