.hmf-gallery {
	position: relative;

	aspect-ratio: 3 / 3;
    width: 100%;
    overflow: hidden;
}

.hmf-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hmf-gallery .swiper-button-next,
.hmf-gallery .swiper-button-prev {
	--arrowSize: 52px;
	width: var(--arrowSize);
	height: var(--arrowSize);
	background: #d0132d;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	transition: 300ms;
}

.hmf-gallery .swiper-button-next:hover,
.hmf-gallery .swiper-button-prev:hover {
	background: #B30D28;
}

.hmf-gallery .swiper-button-prev { left: 16px;  }
.hmf-gallery .swiper-button-next { right: 16px; }

.hmf-gallery .swiper-button-prev::after,
.hmf-gallery .swiper-button-next::after {
	font-size: 18px;
	font-weight: bold;
}

.hmf-gallery .swiper-button-prev.swiper-button-disabled,
.hmf-gallery .swiper-button-next.swiper-button-disabled {
	opacity: .35;
	pointer-events: none;
}

.hmf-thumbs {
	margin: 1rem auto 0;
	max-width: 640px;
	padding: 0 12px;
}

.hmf-thumbs .swiper-wrapper { justify-content: center; }
.hmf-thumbs .swiper-slide   { width: 90px !important;  }
.hmf-thumbs img             { width: 100%; height: auto; display:block; }

.hmf-thumbs .swiper-slide {
	opacity: .45;
	filter: grayscale(1);
	transition: opacity .25s, filter .25s;
	cursor: pointer;
}

.hmf-gallery .swiper-slide {
    display: flex;
}

.hmf-thumbs .swiper-slide-thumb-active {
	opacity: 1;
	filter: grayscale(0);
}

@media (max-width: 560px) {
	.hmf-gallery .swiper-button-next,
	.hmf-gallery .swiper-button-prev {
		--arrowSize: 42px;
	}

	.hmf-gallery .swiper-button-prev {
		left: 16px;
	}

	.hmf-gallery .swiper-button-next {
		right: 16px;
	}

	.hmf-thumbs .swiper-wrapper { justify-content: flex-start; }
}