/* stylelint-disable declaration-no-important */
.ohh-main-hero-pattern {
	--image-padding: 30px;
}

.ohh-main-hero-image {
	position: relative;
	padding-inline: var( --image-padding );
	padding-block-end: var( --image-padding );
	z-index: 1;
}

.ohh-main-hero-image::after {
	content: " ";
	background: url( "../images/dotted-pattern.svg" ) bottom left repeat;
	filter: grayscale( 100% );
	opacity: 0.1;
	background-size: 1.375rem 1.375rem;
	width: 100%;
	height: 90px;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: -1;
}

@media screen and ( max-width: 768px ) {
	.ohh-main-hero-image {
		margin-inline-start: calc( -1 * var( --wp--style--root--padding-left ) ) !important;
		margin-inline-end: calc( -1 * var( --wp--style--root--padding-right ) ) !important;
		padding-inline-start: var( --wp--style--root--padding-left );
		padding-inline-end: var( --wp--style--root--padding-right );
		padding-block-end: var( --wp--style--root--padding-right );
	}
}
/* stylelint-enable declaration-no-important */