.t02-s11--dynamic .t02-s11__grid--carousel {
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.t02-s11--dynamic .t02-s11__grid--carousel::-webkit-scrollbar {
	display: none;
}

.t02-s11--dynamic .t02-s11__track {
	display: flex;
	gap: 16px;
	width: max-content;
	height: 330px;
}

.t02-s11--dynamic .t02-project-card {
	flex: 0 0 308px;
	scroll-snap-align: start;
}

.t02-s11--dynamic .t02-project-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.t02-s11__carousel-control {
	position: absolute;
	top: 479px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid #ded5c6;
	border-radius: 50%;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
	color: #202020;
	font: 700 25px/1 "Gilroy", Arial, sans-serif;
	cursor: pointer;
}

.t02-s11__carousel-control--prev {
	left: calc(50% - 720px);
}

.t02-s11__carousel-control--next {
	right: calc(50% - 720px);
}

.t02-s11__carousel-control:hover,
.t02-s11__carousel-control:focus-visible {
	border-color: var(--color-brand-red);
	box-shadow: 0 0 0 3px rgba(180, 45, 39, .14), 0 8px 22px rgba(0, 0, 0, .12);
	outline: none;
}

@media (max-width: 1450px) {
	.t02-s11__carousel-control--prev { left: 24px; }
	.t02-s11__carousel-control--next { right: 24px; }
}

@media (max-width: 1100px) {
	.t02-s11--dynamic .t02-s11__grid--carousel {
		padding-right: 0;
		padding-left: 0;
	}

	.t02-s11--dynamic .t02-s11__track {
		gap: 20px;
		height: 330px;
	}

	.t02-s11--dynamic .t02-project-card,
	.t02-s11--dynamic .t02-project-card > a {
		flex-basis: 286px;
		width: 286px;
		height: 330px;
	}

	.t02-s11__carousel-control {
		top: 644px;
		width: 44px;
		height: 44px;
		font-size: 21px;
	}
}

@media (max-width: 1023px) {
	.t02-s11--dynamic .t02-s11__track {
		gap: 16px;
		height: 370px;
	}

	.t02-s11--dynamic .t02-project-card,
	.t02-s11--dynamic .t02-project-card > a {
		flex-basis: 300px;
		width: 300px;
		height: 370px;
	}

	.t02-s11__carousel-control {
		top: 676px;
	}

	.t02-s11__carousel-control--prev { left: 24px; }
	.t02-s11__carousel-control--next { right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.t02-s11--dynamic .t02-s11__grid--carousel {
		scroll-behavior: auto;
	}
}