/* desktop */
.service-portfolio-mk2 {
	display: grid;
	grid-template-columns: 26rem 1fr 28rem;
	gap: 4rem;
	align-items: start;
}
.service-portfolio-mk2 .swiper-slide img {
	border-radius: 1.2rem;
}

.service-portfolio-mk2 .projects-list {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.service-portfolio-mk2 .projects-list-item {
	padding: 1.5rem 2.8rem;
	border-radius: 1.2rem;
	background-color: var(--grey-bg);
	cursor: pointer;
	font-weight: 500;
	transition: background-color 0.2s, color 0.2s;
	white-space: nowrap;
}

.service-portfolio-mk2 .projects-list-item.active {
	background-color: var(--accent);
	color: #fff;
}

.service-portfolio-mk2 .projects-slider .swiper {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.service-portfolio-mk2 .projects-slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-portfolio-mk2 .projects-info {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.service-portfolio-mk2 .projects-info-row {
	margin-bottom: 0.8rem;
	padding-left: 0.8rem;
	border-left: var(--border-width-double) solid var(--accent);
}

.service-portfolio-mk2 .projects-info-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.service-portfolio-mk2 .projects-info-label {
	font-size: 1.4rem;
	color: var(--dark-60);
	margin-bottom: 0.4rem;
}

.service-portfolio-mk2 .projects-info-value {
	font-size: 1.8rem;
	font-weight: 600;
}

.service-portfolio-mk2 .projects-slider {
    width: 100%;
    min-width: 0;
}

.service-portfolio-mk2 .projects-slider .swiper {
    width: 100%;
    min-width: 0;
}


/* tablet */
@media (max-width: 1200px) {
	.service-portfolio-mk2 {
		grid-template-columns: 1fr;
		gap: 2.4rem;
	}

	.service-portfolio-mk2 .projects-list {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 0.8rem;
		flex-wrap: wrap;
	}

	.service-portfolio-mk2 .projects-list::-webkit-scrollbar {
		display: none;
	}

	.service-portfolio-mk2 .projects-list-item {
		flex-shrink: 0;
	}

	.service-portfolio-mk2 .projects-info {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2.4rem;
	}

	.service-portfolio-mk2 .projects-info-row {
		margin-bottom: 0; 
	}

	.service-portfolio-mk2 .projects-info-row:nth-child(2n) {
		border-right: none;
	}

	.service-portfolio-mk2 .projects-info-row:nth-last-child(-n+2) {
		border-bottom: none;
	}
}

/* mobile */
@media (max-width: 650px) {
	.service-portfolio-mk2 {
		gap: 2rem;
	}

	.service-portfolio-mk2 .projects-info {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.service-portfolio-mk2 .projects-list-item {
		padding: 1.2rem 1.6rem;
		font-size: 1.4rem;
		border-radius: 0.8rem;
	}

	.service-portfolio-mk2 .projects-info-label {
		font-size: 1.2rem;
	}

	.service-portfolio-mk2 .projects-info-value {
		font-size: 1.6rem;
	}
}