.menu-pattern {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: #E8E8E8;
	opacity: 1 !important;
}

.menu-pattern__illustration {
	width: 100%;
	height: 100%;
}

.menu-pattern__background {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: #E8E8E8;
}

.menu-pattern__background.hover-figure-shown .menu-pattern__figure {
	opacity: 1;
}

.menu-pattern.products .menu-pattern__figure {
	background-image: radial-gradient(transparent, transparent), url("/assets/images/menu-pattern/products.jpg");
}

.menu-pattern__figure {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 400px;
	height: 400px;
	pointer-events: none;
	background: var(--color-primary);
	background-repeat: repeat;
	background-size: auto !important;
	transform: none;
	opacity: 0;
	background-image: radial-gradient(transparent, transparent), url("/assets/images/menu-pattern/company.jpg");
	transition: opacity .3s ease;
	mask-image: url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='150' cy='150' r='150' fill='url(%23rad-grad-mask)'/%3E%3Cdefs%3E%3CradialGradient id='rad-grad-mask' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(150 150) rotate(90) scale(150)'%3E%3Cstop/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E%0A");
	mask-size: contain;
	mask-position: 0 0;
}