.mpa-projects {
	--mpa-accent: #e6005c;
	--mpa-per: var(--mpa-visible, 3);
	position: relative;
}
@media (max-width: 1024px) { .mpa-projects { --mpa-per: var(--mpa-tablet, 2); } }
@media (max-width: 600px)  { .mpa-projects { --mpa-per: var(--mpa-mobile, 1); } }

.mpa-projects__viewport { overflow: hidden; padding: 6px 2px 14px; }
.mpa-projects__track {
	display: flex;
	gap: var(--mpa-gap, 24px);
	will-change: transform;
}
.mpa-projects__item {
	flex: 0 0 calc((100% - (var(--mpa-per) - 1) * var(--mpa-gap, 24px)) / var(--mpa-per));
	min-width: 0;
}
.mpa-projects__card {
	height: 100%;
	box-sizing: border-box;
	padding: 16px 18px 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 14px rgba(20, 30, 60, .08);
}
.mpa-projects__card { display: flex; flex-direction: column; align-items: flex-start; }
.mpa-projects__link { margin-top: auto; }
.mpa-projects__image { margin-bottom: 12px; width: 100%; }
.mpa-projects__image a { display: block; }
.mpa-projects__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	-webkit-user-drag: none;
	user-select: none;
}
.mpa-projects__title { margin: 0 0 4px; font-size: 1.1rem; line-height: 1.3; }
.mpa-projects__desc { margin: 0 0 10px; font-size: .95rem; line-height: 1.45; }
.mpa-projects__link {
	color: var(--mpa-accent);
	font-weight: 600;
	text-decoration: none;
}
.mpa-projects__link:hover { text-decoration: underline; }

/* Arrows: placed top-right by default so they can sit beside a "Recent Projects" heading;
   on a section with a heading row, override with .mpa-projects__nav { position: static } as needed. */
.mpa-projects__nav {
	position: absolute;
	top: -52px;
	right: 0;
	display: flex;
	gap: 10px;
}
.mpa-projects__btn {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid #e3e6ee;
	border-radius: 50%;
	background: #fff;
	color: var(--mpa-accent);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(20, 30, 60, .08);
	transition: background .2s, color .2s;
}
.mpa-projects__btn:hover,
.mpa-projects__btn:focus-visible { background: var(--mpa-accent); color: #fff; }
.mpa-projects--static .mpa-projects__nav { display: none; }

@media (max-width: 600px) {
	.mpa-projects__nav { position: static; justify-content: center; margin-top: 4px; }
}