/**
 * Make slider arrows and shadows appear gradually
 */
.mh-property .swiper-container .swiper-slide::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 25%;
	height: 100%;
	background: linear-gradient(to left, transparent 0, rgba(0, 0, 0, 0.5) 100%);
	z-index: 2;
	visibility: hidden;
	opacity: 0;
	transition:
		visibility 0.15s ease-in-out,
		opacity 0.15s ease-in-out;
}
.mh-property .swiper-container .swiper-slide::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 25%;
	height: 100%;
	background: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.5) 100%);
	z-index: 2;
	visibility: hidden;
	opacity: 0;
	transition:
		visibility 0.15s ease-in-out,
		opacity 0.15s ease-in-out;
}
.mh-property .swiper-container:hover .swiper-slide::before,
.mh-property .swiper-container:hover .swiper-slide::after {
	visibility: visible;
	opacity: 1;
}

.mh-property .swiper-container :is(.swiper-button-prev, .swiper-button-next) {
	display: block !important;
	visibility: hidden;
	opacity: 0;
	transition:
		visibility 0.15s ease-in-out,
		opacity 0.15s ease-in-out;
}
.mh-property .swiper-container:hover :is(.swiper-button-prev, .swiper-button-next) {
	display: block !important;
	visibility: visible;
	opacity: 1;
}