.projects {
	background: var(--color-dark);
	color: var(--color-white);
	padding-block: var(--section-py);
}

.projects__title {
	color: var(--color-white);
	text-align: center;
	margin-bottom: 32px;
}

@media (min-width: 1024px) {
	.projects__title {
		margin-bottom: 56px;
	}
}

.projects__cases {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.project-case {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 1024px) {
	.project-case {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 60px;
	}

	.project-case--reverse {
		flex-direction: row-reverse;
	}
}

.project-case__media {
	flex: 1;
	aspect-ratio: 3 / 2;
	background: rgba(253, 253, 255, 0.08);
}

@media (min-width: 1280px) {
	.project-case__media {
		flex: none;
		width: 597px;
	}
}

.project-case__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-case__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (min-width: 1280px) {
	.project-case__body {
		flex: none;
		width: 478px;
	}

	/* Body sits inset from the row's outer edge — media stays flush. */
	.project-case:not(.project-case--reverse) .project-case__body {
		margin-right: 60px;
	}

	.project-case--reverse .project-case__body {
		margin-left: 60px;
	}
}

.project-case__title {
	color: var(--color-white);
}

.project-case__text {
	color: #f5f3ef;
	font-size: 15px;
}

.projects__strip {
	position: relative;
	margin-top: 48px;
}

.projects__strip-track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.projects__strip-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.projects__strip-track::-webkit-scrollbar {
	display: none;
}

.projects__strip-item {
	width: 331px;
	height: 220px;
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.projects__strip-item {
		width: 480px;
		height: 320px;
	}
}

.projects__strip-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.projects__strip-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding-block: 14px;
}

@media (min-width: 1024px) {
	.projects__strip-nav {
		display: none;
	}
}

.projects__strip-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0.8px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	background: transparent;
	transition: background-color 0.2s ease;
}

.projects__strip-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

.projects__strip-btn img {
	width: 20px;
	height: 20px;
}

.projects__closing {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	border-top: 1px solid var(--color-white);
	padding-top: 20px;
	margin-top: 48px;
}

@media (min-width: 1024px) {
	.projects__closing {
		max-width: 1196px;
		margin-inline: auto;
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		justify-content: space-between;
		gap: 40px;
	}
}

.projects__closing-title,
.projects__closing-text {
	color: var(--color-white);
}

.projects__closing-title {
	flex: 1;
}

.projects__closing-text {
	flex: 1;
}