.team-overview {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin: 24px 0 32px 0;

	@media (width <= 1024PX) {
		grid-template-columns: repeat(3, 1fr);
	}

	@media (width <= 768px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

.team-card {
	background-color: var(--so-color-primary-light);
	padding: 4px 4px 16px 4px;
	border-radius: 12px;
	gap: 16px;
	flex-wrap: unset;

	figure {
		aspect-ratio: 1/1;
		border-radius: 12px;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		padding-right: 12px;
		padding-left: 12px;

		h6 {
			margin-bottom 4px;
			font-weight: 600;
		}

		p {
			font-size: 12px;
			margin: 0;
			font-weight: 500;
		}

		@media (width <= 576px) {
			flex-direction: column;
			gap: 20px;
			align-items: flex-start;
		}
	}

	.team-card-buttons {
		display: flex;
		flex-direction: row;
		gap: 8px;

		.button {
			padding: unset;
			width: 40px;
			height: 40px;

			i {
				filter: invert(1);
				width: 16px;
				height: 16px;
				display: inline-block;
				margin: 0 auto;
				background-position: center;
				background-size: contain;
			}
		}
	}

	&:hover figure img {
		transform: none;
	}


}