.wp-block-hoyre-slogan {
	--margin: calc(-1 * var(--teft-theme-site-padding));
	background: var(--color-blue-500);
	margin-left: var(--margin) !important;
	margin-right: var(--margin) !important;
	text-align: center;
	position: relative;
	margin-top: 0 !important;
	margin-bottom: clamp(2.5rem, 1.8275rem + 2.1521vw, 4.375rem) !important;
	max-width: 1800px !important
}

.wp-block-hoyre-slogan .slogan__background-media {
		max-width: 100%;
		aspect-ratio: 1 / 1;
		-o-object-fit: cover;
		   object-fit: cover;
		-o-object-position: var(--focal-point, 50% 50%);
		   object-position: var(--focal-point, 50% 50%);
		vertical-align: bottom;
		height: auto;
	}

.slogan__image {
	position: relative;
}

.slogan__content {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: clamp(1.25rem, 1.162rem + 0.2817vw, 1.5rem);
	padding: 50px var(--teft-theme-site-padding);
	max-width: 56.25rem
}

.slogan__content > svg,
	.slogan__content > .slogan__slogan-image,
	.slogan__content .slogan__big-title {
		height: auto;
		fill: currentColor;
		max-width: 100%;
		width: 64%;
		position: absolute;
		bottom: calc(100% + 1.5rem);
		left: 50%;
		transform: translateX(-50%);
	}

.slogan__content p {
		margin: 0 0 1em;
	}

.slogan__big-title {
	word-break: normal;
	font-size: clamp(3rem, 2.0625rem + 3vw, 4.5rem) !important;
	margin-bottom: 0;
}

.slogan__backdrop {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0.7) 100%
	);
}

@media (max-width: 599px) {
	.entry-content .slogan__content .button {
		background: #fff;
		color: var(--color-blue-500);
	}
}

@media (min-width: 600px) {
	.wp-block-hoyre-slogan {
		--margin: auto;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		min-height: min(
			clamp(25rem, 10.7955rem + 37.8788vw, 56.25rem),
			calc(100vh - 152px - var(--wp-admin--admin-bar--height, 0px))
		)
	}

		.wp-block-hoyre-slogan .slogan__background-media {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}

	.slogan__image {
		position: static;
	}

	.slogan__content {
		padding: min(clamp(12.5rem, 9.6591rem + 7.5758vw, 18.75rem), 29.25vh)
			4rem clamp(2rem, 1.0909rem + 2.4242vw, 4rem)
	}

		.slogan__content > svg,
		.slogan__content > .slogan__slogan-image {
			position: relative;
			transform: none;
			left: auto;
			width: min(
				clamp(12.5rem, 3.9773rem + 22.7273vw, 31.25rem),
				60vh,
				50vw
			);
		}

		.slogan__content .slogan__big-title {
			position: relative;
			transform: none;
			left: auto;
			width: auto;
			bottom: 0;
		}

		.slogan__content p {
			margin: 1em 0;
		}
}

