/* stylelint-disable declaration-no-important */
.ohh-quote-media-pattern {
	--ohh-quote-overlap: 120px;
	--ohh-quote-margin-block-start: 30px;
	--ohh-quote-margin-inline-start: calc( 2 * var( --wp--style--block-gap, 0px ) + var( --ohh-quote-overlap ) );
}

.ohh-quote-media-pattern .wp-block-quote {
	margin-inline-start: calc( -1 * ( var( --wp--style--block-gap, 0px ) + var( --ohh-quote-overlap ) ) ) !important;
	margin-block-start: var( --ohh-quote-margin-block-start ) !important;
	position: relative;
}

.ohh-quote-media-pattern .wp-block-quote::after {
	content: " ";
	background: url( "../images/dotted-pattern.svg" ) bottom left repeat;
	filter: grayscale( 100% );
	opacity: 0.1;
	background-size: 1.375rem 1.375rem;
	bottom: 0;
	width: 30%;
	height: 100px;
	position: absolute;
	top: calc( -1 * var( --ohh-quote-margin-block-start ) );
	left: var( --ohh-quote-margin-inline-start );
	z-index: -1;
}

.ohh-quote-media-pattern .wp-block-image img {
	width: 100%;
}

@media screen and ( max-width: 768px ) {
	.ohh-quote-media-pattern {
		gap: 0;
	}

	.ohh-quote-media-pattern__quote-column .wp-block-quote {
		margin-inline: 0 !important;
	}

	.ohh-quote-media-pattern .wp-block-quote {
		margin-block-start: 0 !important;
	}

	.ohh-quote-media-pattern .wp-block-quote::after {
		display: none;
	}
}
/* stylelint-enable declaration-no-important */