div.mice-projects-cards {
	--mpc-gap: 20px;
	--mpc-columns: 4;
	--mpc-radius: 6px;
	--mpc-ratio: 0.745 / 1;
	--mpc-text: #ffffff;
	--mpc-overlay: rgba(0, 0, 0, 0);
	--mpc-overlay-hover: rgba(0, 0, 0, 0.2);
	--mpc-accent: #960a19;
	--mpc-accent-soft: rgba(150, 10, 25, 0.28);
	--mpc-duration: 0.75s;
	--mpc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mpc-transition: var(--mpc-duration) var(--mpc-ease);
	--mpc-slider-transition: 0.55s cubic-bezier(0.4, 0, 0.2, 1);

	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

div.mice-projects-cards *,
div.mice-projects-cards *::before,
div.mice-projects-cards *::after {
	box-sizing: border-box;
}

div.mice-projects-cards .mice-projects-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--mpc-columns), minmax(0, 1fr));
	gap: var(--mpc-gap);
	width: 100%;
	align-items: stretch;
}

div.mice-projects-cards .mice-projects-cards__card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--mpc-ratio);
	min-width: 0;
	border-radius: var(--mpc-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--mpc-text);
	background: #2a2a2a;
}

div.mice-projects-cards .mice-projects-cards__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #3a3a3a;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(0);
	transition: filter var(--mpc-transition);
}

div.mice-projects-cards .mice-projects-cards__image--placeholder {
	background-color: #3a3a3a;
}

div.mice-projects-cards .mice-projects-cards__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--mpc-overlay);
	pointer-events: none;
	transition: background var(--mpc-transition);
}

div.mice-projects-cards .mice-projects-cards__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Default: true vertical + horizontal center */
div.mice-projects-cards .mice-projects-cards__direction {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	z-index: 1;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 18px;
	font-family: Ahellya, Georgia, "Times New Roman", serif;
	font-size: 24px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.25;
	text-align: center;
	color: var(--mpc-text);
	transform: translateY(-50%);
	transition:
		top var(--mpc-transition),
		transform var(--mpc-transition);
}

/* Absolute under direction so layout stays stable */
div.mice-projects-cards .mice-projects-cards__details {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: 100%;
	padding: 0 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(28px);
	pointer-events: none;
	transition:
		opacity var(--mpc-transition),
		transform var(--mpc-transition),
		visibility 0s linear var(--mpc-duration);
}

div.mice-projects-cards .mice-projects-cards__title,
div.mice-projects-cards .mice-projects-cards__meta {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: "TikTok Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	text-align: center;
	color: var(--mpc-text);
}

div.mice-projects-cards .mice-projects-cards__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 10px 0 0;
	font-family: "TikTok Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--mpc-text);
}

div.mice-projects-cards .mice-projects-cards__cta-icon {
	display: block;
	flex: 0 0 auto;
	width: 17px;
	height: auto;
}

div.mice-projects-cards .mice-projects-cards__card:hover .mice-projects-cards__image,
div.mice-projects-cards .mice-projects-cards__card:focus-visible .mice-projects-cards__image {
	filter: blur(1px);
}

div.mice-projects-cards .mice-projects-cards__card:hover .mice-projects-cards__overlay,
div.mice-projects-cards .mice-projects-cards__card:focus-visible .mice-projects-cards__overlay {
	background: var(--mpc-overlay-hover);
}

/* Direction slides down toward lower third */
div.mice-projects-cards .mice-projects-cards__card:hover .mice-projects-cards__direction,
div.mice-projects-cards .mice-projects-cards__card:focus-visible .mice-projects-cards__direction {
	top: calc(100% - var(--mpc-details-h, 0px) - 34px);
	transform: translateY(-100%);
}

/* Details slide up from bottom */
div.mice-projects-cards .mice-projects-cards__card:hover .mice-projects-cards__details,
div.mice-projects-cards .mice-projects-cards__card:focus-visible .mice-projects-cards__details {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity var(--mpc-transition),
		transform var(--mpc-transition),
		visibility 0s linear 0s;
	transition-delay: 0.06s, 0.06s, 0s;
}

@media (max-width: 1199px) {
	div.mice-projects-cards {
		--mpc-columns: 2;
	}
}

@media (max-width: 767px) {
	div.mice-projects-cards {
		--mpc-columns: 1;
		--mpc-gap: 16px;
	}

	div.mice-projects-cards .mice-projects-cards__direction {
		font-size: 20px;
		padding: 0 16px;
	}

	div.mice-projects-cards .mice-projects-cards__details {
		bottom: 28px;
		padding: 0 16px;
	}

	div.mice-projects-cards .mice-projects-cards__card:hover .mice-projects-cards__direction,
	div.mice-projects-cards .mice-projects-cards__card:focus-visible .mice-projects-cards__direction {
		top: calc(100% - var(--mpc-details-h, 0px) - 34px);
		transform: translateY(-100%);
	}

	div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__footer {
		margin-top: 24px;
		gap: 16px;
	}
}

@media (hover: none) {
	div.mice-projects-cards .mice-projects-cards__card .mice-projects-cards__image {
		filter: blur(1px);
	}

	div.mice-projects-cards .mice-projects-cards__card .mice-projects-cards__overlay {
		background: var(--mpc-overlay-hover);
	}

	div.mice-projects-cards .mice-projects-cards__card .mice-projects-cards__direction {
		top: calc(100% - var(--mpc-details-h, 0px) - 34px);
		transform: translateY(-100%);
	}

	div.mice-projects-cards .mice-projects-cards__card .mice-projects-cards__details {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}
}

/* Slider mode (>4 cards) */
div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__viewport {
	width: 100%;
	overflow: hidden;
}

div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__track {
	display: flex;
	align-items: stretch;
	gap: var(--mpc-gap);
	will-change: transform;
	transition: transform var(--mpc-slider-transition);
}

div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__card {
	flex: 0 0 calc((100% - (var(--mpc-gap) * (var(--mpc-columns) - 1))) / var(--mpc-columns));
	width: calc((100% - (var(--mpc-gap) * (var(--mpc-columns) - 1))) / var(--mpc-columns));
}

div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 38px;
}

div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__progress {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 1px;
	background: var(--mpc-accent-soft);
}

div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__progress-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--mpc-accent);
	transition: width var(--mpc-slider-transition);
}

div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__nav {
	display: flex;
	flex-shrink: 0;
	gap: 10px;
}

div.mice-projects-cards .mice-projects-cards__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid var(--mpc-accent);
	border-radius: 50%;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--mpc-accent);
	cursor: pointer;
	opacity: 1;
	box-shadow: none;
	transition: opacity 0.2s ease;
}

div.mice-projects-cards .mice-projects-cards__arrow:hover:not(:disabled):not([aria-disabled="true"]),
div.mice-projects-cards .mice-projects-cards__arrow:focus-visible:not(:disabled):not([aria-disabled="true"]),
div.mice-projects-cards .mice-projects-cards__arrow:active:not(:disabled):not([aria-disabled="true"]) {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--mpc-accent);
	outline: none;
	box-shadow: none;
}

div.mice-projects-cards .mice-projects-cards__arrow:disabled,
div.mice-projects-cards .mice-projects-cards__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	div.mice-projects-cards .mice-projects-cards__image,
	div.mice-projects-cards .mice-projects-cards__overlay,
	div.mice-projects-cards .mice-projects-cards__direction,
	div.mice-projects-cards .mice-projects-cards__details,
	div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__track,
	div.mice-projects-cards.mice-projects-cards--slider .mice-projects-cards__progress-fill {
		transition: none;
	}
}