.team {
	padding: 100px 0;
	background: #F8FAFC;
	color: #131C2E;
}

/* Header */
.team__badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	padding: 9px 16px;
	background: #EDF0F5;
	border: 1px solid #D5DEE9;
	border-radius: 40px;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: #131C2E;
}

.team__badge-dot {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-primary);
}

.team__heading {
	margin: 0 0 16px;
	color: #131C2E;
}

.team__heading span {
	color: var(--color-primary);
}

.team__text {
	max-width: 820px;
	margin-bottom: 56px;
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: #3B455A;
}

.team__text p {
	margin: 0 0 12px;
}

.team__text p:last-child {
	margin-bottom: 0;
}

/* Grid */
.team__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

/* Card */
.team-card {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 209px minmax(0, 1fr);
	gap: 24px;
	padding: 22px 24px 24px;
	background: #E9EEF5;
	border: 1.5px solid #D5DEE9;
	border-radius: 8px;
}

.team-card__photo {
	overflow: hidden;
	border-radius: 8px;
}

.team-card__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top;
}

/* A member without a photo gets the full card width. */
.team-card:not(:has(.team-card__photo)) {
	grid-template-columns: minmax(0, 1fr);
}

.team-card__name {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 140%;
	font-weight: 600;
	text-transform: uppercase;
	color: #131C2E;
}

.team-card__role {
	margin: 0 0 24px;
	font-size: 18px;
	font-weight: 600;
	line-height: 140%;
	color: #4E7E01;
}

.team-card__text {
	font-size: 16px;
	line-height: 150%;
	font-weight: 400;
	color: #3B455A;
}

.team-card__text p {
	margin: 0 0 12px;
}

.team-card__text p:last-child {
	margin-bottom: 0;
}



@media (max-width: 1440px){
	.team {
		padding: 60px 0;
	}

	.team__badge {
		padding: 7px 16px;
		font-size: 14px;
		margin: 0 0 16px;
	}

	.team__heading {
		font-size: 24px;
	}

	.team__text {
		margin-bottom: 40px;
		font-size: 14px;
	}

	.team__grid {
		gap: 16px;
	}

	.team-card {
		grid-template-columns: 160px minmax(0, 1fr);
    	padding: 20px 19px 18px;
	}

	.team-card__name {
		font-size: 18px;
	}

	.team-card__role {
		margin: 0 0 8px;
		font-size: 16px;
	}

	.team-card__text {
		font-size: 14px;
	}
}

@media (max-width: 768px){
	.team__text {
        margin-bottom: 32px;
    }

	.team-card__photo {
		border-radius: 3px;
	}

	.team-card__photo img {
		width: 140px;
	}

	.team-card {
        grid-template-columns: 140px minmax(0, 1fr);
        padding: 19px 19px 18px;
    }

	.team-card__role {
        margin: 0 0 5px;
    }
}



/* Tablet - one card per row, the photo keeps its place. */
@media (max-width: 1023px) {
	.team__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mobile - the photo moves above the text. */
@media (max-width: 550px) {
	.team {
        padding: 40px 0;
    }

	.team__badge {
        padding: 3px 11px;
        font-size: 12px;
		margin: 0 0 12px;
        gap: 8px;
    }

	.team__badge-dot {
		width: 8px;
		height: 8px;
	}

	.team__heading {
        font-size: 18px;
		margin: 0 0 12px;
    }

	.team-card {
		grid-template-columns: minmax(0, 1fr);
        gap: 23px;
	}

	.team-card__photo {
		max-width: 220px;
	}

	.team-card__role {
        margin-bottom: 6px;
        font-size: 14px;
    }

	.team__text {
        margin-bottom: 20px;
        font-size: 14px;
    }

	.team-card__name {
        font-size: 16px;
    }
}