.our-team-single .our-team-container{
	--team-portrait-size: 360px;
	display: grid !important;
	grid-template-columns: var(--team-portrait-size) 1fr;
	grid-template-rows: auto auto;
	column-gap: 48px;
	row-gap: 16px;
	padding-block: 64px;
	padding-inline: clamp(24px, 5vw, 64px);
}

.our-team-single .our-team-left{  
	grid-column: 1;
	grid-row: 1 / 3;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.our-team-single .team-photo{
	width: 100%;
}

.our-team-single .team-linkedin{
	width: 100%;
	display: flex;
	justify-content: center;
}

.our-team-single .our-team-right{ 
	grid-column: 2;
	grid-row: 1;
	align-self: center;
}

/* Left: main image, social links */
.our-team-single .team-photo{
	aspect-ratio: 1 / 1; /* square placeholder */
	position: relative;
	margin: 0;
  	width: min(100%, var(--team-portrait-size));
  	max-width: var(--team-portrait-size);
}

.our-team-single .team-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px;
}

.our-team-single .team-linkedin {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
}

/* Linkedin image */
.team-linkedin img {
	width: 40px; height: 40px; display: block;
}

/* Right: text */
.our-team-single .our-team-right .team-name{ margin: 0 0 6px; line-height: 1.12; }
.our-team-single .our-team-right .team-job{ margin: 0 0 24px; }
.team-job{color: #37935C}; /* This is hex of green accent, is there global var somewhere? */
.our-team-single .team-description{ line-height: 1.7; }
.our-team-single .team-description > p + p{  margin-top: 1em; }

/* desktop */
@media (max-width: 1440px) {
	.our-team-single .our-team-container{ --team-portrait-size: 340px; gap: 40px; }
}
@media (max-width: 1366px) {
	.our-team-single .our-team-container{ --team-portrait-size: 320px; }
}
@media (max-width: 1280px) {
	.our-team-single .our-team-container{ --team-portrait-size: 300px; gap: 36px; }
}

/* tablet */
@media (max-width: 768px) {
	.our-team-single .our-team-container {
		grid-template-columns: 1fr;   /* single column */
		--team-portrait-size: 280px; 
		gap: 32px;
		padding-block: 48px;
	}
	
	.our-team-single .our-team-left {
		grid-column: 1 !important;
		grid-row: auto !important;
		display: flex; /* Keep flexbox for mobile */
		flex-direction: column;
		align-items: center;
		width: fit-content;
		margin: 0 auto;
	}
	
	.our-team-single .our-team-right {
		grid-column: 1 !important;
		grid-row: auto !important;
		align-self: start;
		margin-top: 0;
		text-align: center;
	}

	/* center image */
	.our-team-single .team-photo { 
		margin-inline: auto;
	}
	
	/* Keep LinkedIn icon centered below image on mobile */
	.our-team-single .team-linkedin { 
		margin-top: 20px;
		justify-content: center;
	}
}

/* mobile */
@media (max-width: 440px) {
	.our-team-single .our-team-container {
		--team-portrait-size: 240px;
	}
}