.mfmir-cc-wrap {
	position: relative;
	width: 100%;
}

.mfmir-cc-nav {
	position: absolute;
	top: -52px;
	inset-inline-start: 0;
	display: flex;
	gap: 8px;
	z-index: 2;
}

.mfmir-cc-nav button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #dde3ea;
	background: #fff;
	color: #00447f;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, transform .15s ease;
	padding: 0;
}

.mfmir-cc-nav button:hover {
	background: #eaf1f8;
}

.mfmir-cc-nav button:active {
	transform: scale(0.92);
}

.mfmir-cc-nav svg {
	width: 16px;
	height: 16px;
}

.mfmir-cc-track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 2px 12px;
	scrollbar-width: none;
	direction: rtl;
}

.mfmir-cc-track::-webkit-scrollbar {
	display: none;
}

.mfmir-cc-card {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: 140px;
	text-decoration: none;
	display: block;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e7ebf0;
	transition: transform .25s ease, box-shadow .25s ease;
}

.mfmir-cc-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-color: #00447f;
	display: flex;
	align-items: flex-end;
}

.mfmir-cc-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 20, 40, 0.65) 100%);
}

.mfmir-cc-label {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 12px 8px;
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
	.mfmir-cc-card {
		width: 112px;
	}
	.mfmir-cc-label {
		font-size: 12.5px;
		padding: 9px 6px;
	}
}