.headerbar {
	position: relative;
	box-sizing: border-box;
	aspect-ratio: 3 / 1;
	min-height: 390px;
	overflow: hidden;
	background-color: #042b17 !important;
	background-image: url("./images/jolki-polki-baner.png") !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	border: 2px solid #a5c931 !important;
	border-radius: 18px !important;
	box-shadow:
		0 0 0 4px rgba(28, 98, 45, 0.38),
		0 14px 32px rgba(1, 18, 11, 0.48) !important;
}

.headerbar .site-description {
	visibility: hidden;
	pointer-events: none;
}

.jp-banner-hotspots {
	position: absolute;
	z-index: 3;
	inset: 0;
	pointer-events: none;
}

.jp-banner-home,
.jp-banner-chat {
	position: absolute;
	display: block;
	pointer-events: auto;
	border-radius: 14px;
}

.jp-banner-home {
	top: 8%;
	left: 3%;
	width: 18%;
	height: 48%;
}

.jp-banner-chat {
	top: 15%;
	left: 22%;
	right: 2%;
	height: 54%;
}

.jp-banner-home:hover,
.jp-banner-home:focus,
.jp-banner-chat:hover,
.jp-banner-chat:focus {
	outline: 2px solid rgba(230, 244, 128, 0.8);
	outline-offset: -3px;
	background: rgba(216, 233, 69, 0.05);
}

.headerbar .mz-share {
	top: auto;
	right: auto;
	bottom: 24%;
	left: 11.5%;
	z-index: 6;
	min-width: 0;
	max-width: 58%;
	background: rgba(3, 42, 24, 0.82);
	border-color: #a5c931;
}

.headerbar .search-header {
	position: absolute;
	z-index: 6;
	right: auto;
	bottom: 7%;
	left: 11.5%;
	width: 50%;
	margin: 0;
}

.mz-share__button--email {
	background: linear-gradient(180deg, #7d9b2e, #4f701f);
}

.mz-share__button--copy {
	background: linear-gradient(180deg, #a3a72b, #687719);
}

.mz-share__button--x {
	min-width: 38px;
	justify-content: center;
}

@media (max-width: 900px) {
	.headerbar {
		aspect-ratio: auto;
		min-height: 410px;
		background-size: cover !important;
		background-position: 57% center !important;
	}

	.jp-banner-home {
		left: 2%;
		width: 22%;
	}

	.jp-banner-chat {
		left: 24%;
	}

	.mz-share {
		min-width: 0;
		flex-wrap: wrap;
	}

	.headerbar .mz-share {
		right: 4%;
		bottom: 21%;
		left: 4%;
		max-width: none;
	}

	.headerbar .search-header {
		right: 4%;
		bottom: 5%;
		left: 4%;
		width: auto;
	}
}

@media (max-width: 520px) {
	.headerbar {
		min-height: 470px;
		background-position: 62% center !important;
	}

	.jp-banner-home {
		width: 28%;
	}

	.jp-banner-chat {
		left: 30%;
	}

	.headerbar .mz-share {
		bottom: 23%;
	}
}