.team_grid-layout .pk-grid-container {
	align-items: center;
	background-color: var(--white);
	padding: max(1rem, calc(3 * var(--su)));
}

.team_grid-layout .featured-slider .swiper-slide {
	display: flex;
	align-items: center;
	gap: max(2rem, calc(9 * var(--su)));
}
.team_grid-layout .featured-slider .team-image {
	width: 35%;
	flex-shrink: 0;
}
.team_grid-layout .thumbnails > button img,
.team_grid-layout .featured-slider .team-image img {
	width: 100%;
	aspect-ratio: 18/23;
	object-fit: cover;
	user-select: none;
}
.team_grid-layout .featured-slider .team-title {
	text-transform: uppercase;
	margin: 0;
}
.team_grid-layout .featured-slider .team-title strong {
	font-weight: 500;
}
.team_grid-layout .featured-slider .pk-text {
	margin-block: max(1rem, calc(1.25 * var(--su)));
    font-size: var(--desktop-body-md);
}

.team_grid-layout .thumbnails {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
	margin-top: max(2rem, calc(2 * var(--su)));
}
.team_grid-layout .thumbnails > button {
	appearance: none;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	grid-column: span 1;
	width: 100%;
	cursor: pointer;
}
.team_grid-layout .thumbnails.animation-ended > button {
	transition: opacity 0.2s ease;
}
.team_grid-layout .thumbnails:has(button:hover) > button:not(:hover) {
	opacity: 0.5;
}

@media screen and (min-width: 993px) {
	.team_grid-layout .button-col .pk-button-group {
		justify-content: end;
	}
}


@media screen and (max-width: 767px) {
	.team_grid-layout .featured-slider .swiper-slide {
		flex-direction: column;
	}
	.team_grid-layout .featured-slider .team-image {
		width: 100%;
	}
	.team_grid-layout .thumbnails {
		grid-template-columns: repeat(3, 1fr);
	}
}