#team-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

#team-buttons > a {
	display: flex;
	flex-direction: row-reverse;
	gap: 0.5em;

	font-family: 'Arvo', serif;
	font-size: 1.1rem;
	line-height: 1.5;

	border-radius: 100px;
}

#team-buttons > a > span {
	font-size: 1.25em;
}

.team-title {
	padding: 1.5rem 0;
	background-color: #232323;
	color: #fff;
}

.team-title h4 {
	font-family: 'Arvo', serif;
	font-weight: bold;
	font-size: 5rem;
	text-align: center;
	margin: 0;
}

.team-card-container .card {
	flex-direction: row;
	align-items: center;
	gap: 1.5em;

	overflow: hidden;

	align-items: stretch; /* To stretch image-wrapper vertically */

	background-color: #232323;
	background-color: transparent;

	backdrop-filter: brightness(50%) contrast(71%) blur(10px);
	box-shadow: 10px 10px 10px black;

	border-radius: 20px;
}

.team-card-container .image-wrapper {
	width: 23%;

	background-size: cover;
	background-position: center;
	min-height: 240px;
	box-shadow: 10px 0 2px rgba(0,0,0,0.5);
}

.team-card-container .card-box {
	display: flex;
	flex-direction: column;
	justify-content: center;

	flex: 1 0 0%;
}

.team-card-container .card-box h5 {
	font-size: 4rem;
	margin-top: 0.25em;
}
.team-card-container .card-box h6 {
	font-size: 2rem;
}

@media (max-width: 1299px) {
	.team-card-container .image-wrapper {
		min-height: 205px;
	}
}

@media (max-width: 991px) {
	.team-card-container .image-wrapper {
		min-height: 160px;
	}

	.team-card-container .card-box h5 {
		font-size: 3rem;
	}
	.team-card-container .card-box h6 {
		font-size: 1.75rem;
	}
}

@media (max-width: 767px) {

	.team-title h4 {
		font-size: 11vw;
	}

	.team-card-container .image-wrapper {
		min-height: 160px;
		width: 30%;
	}

	.team-card-container .card-box h4,
	.team-card-container .card-box h5,
	.team-card-container .card-box h6 {
		line-height: unset !important;
	}

	.team-card-container .card-box h5 {
		font-size: 2rem;
	}
	.team-card-container .card-box h6 {
		font-size: 1.5rem;
	}
}

@media (max-width: 384px) {

	#team-buttons > a {
		border-radius: 25px;
		flex-direction: column;
		width: 100%;
	}

	/* Vertical cards */

	.team-card-container .card {
		flex-direction: column;
		gap: 0.5em;
	}

	.team-card-container .image-wrapper {
		width: 100%;
		box-shadow: 0 10px 2px rgba(0,0,0,0.5);
	}

	.team-card-container .card-box {
		gap: 0.25em;
		min-height: 3em;
		padding: 0.5em;
	}

	.team-card-container .card-box h4,
	.team-card-container .card-box h5,
	.team-card-container .card-box h6 {
		margin: 0 !important;
	}

}