.sq-block--team .sq-container {
	overflow: hidden;
}

.sq-team-section__title {
	color: var(--text-color--accent);
}

.sq-team-section__text {
	margin-top: 0.8rem;
}

.sq-team-section__members {
	overflow: hidden;
	margin-top: 1.6rem;
	position: relative;
	left: calc(var(--gutter) * -1);
	width: var(--window-width);
}

.sq-team-section__list {
	list-style: none;
	margin: 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
	display: flex;
	flex-flow: row nowrap;
	flex: 1 1;
	gap: var(--gutter);
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 var(--gutter);
}

.sq-team-section__list::-webkit-scrollbar {
	display: none;
}

.sq-team-section__item {
	width: 28rem;
	flex-shrink: 0;
}

.sq-team-section__item > * {
	height: 100%;
}

.sq-team-member {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}

.sq-team-member__figure {
	position: relative;
	aspect-ratio: 27 / 31;
	overflow: hidden;
	margin: 0;
}

.sq-team-member__thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sq-team-member__job-title {
	margin-bottom: 1.6rem;
}

.sq-team-member__button {
	margin-top: auto;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

@media only screen and (min-width: 600px) {
	.sq-team-section__item {
		width: calc(var(--window-width) * 0.5);
	}
}

@media only screen and (min-width: 1000px) {
	/* Paneelopmaak hangt aan de scrollrichting en niet aan de schermbreedte, dus
	   alles hieronder is op body.scroll_horizontal gescoopt; op een verticale
	   pagina valt het blok terug op de stroomlayout hierboven. `:where()` houdt de
	   specificiteit op nul, zodat de bredere media-queries verderop blijven winnen. */

	:where(body.scroll_horizontal) .sq-block--team {
		min-width: var(--window-width);
		height: var(--window-height);
		padding: var(--header-height) 0;
	}

	:where(body.scroll_horizontal) .sq-team-section__content {
		height: 100%;
		overflow-y: auto;
		display: flex;
		flex-flow: row nowrap;
		gap: var(--gutter);
	}

	:where(body.scroll_horizontal) .sq-team-section__text-container {
		flex: 1;
	}

	:where(body.scroll_horizontal) .sq-team-section__text {
		margin-top: 3.2rem;
	}

	:where(body.scroll_horizontal) .sq-team-section__members {
		flex: 2;
		margin-top: 0;
		position: static;
		left: auto;
		width: auto;
	}

	:where(body.scroll_horizontal) .sq-team-section__list {
		padding: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--gutter);
		overflow: visible;
	}

	:where(body.scroll_horizontal) .sq-team-section__item {
		width: auto;
	}

	:where(body.scroll_horizontal) .sq-team-member {
		flex-direction: row;
		gap: 1.6rem;
	}

	:where(body.scroll_horizontal) .sq-team-member__figure {
		aspect-ratio: 23 / 26;
		flex: 1 0;
		max-width: 18.4rem;
	}
}

@media only screen and (min-width: 2560px) {
	:where(body.scroll_horizontal) .sq-team-section__content {
		padding-top: 4.8rem;
	}
}

/* Team member bio modal sheet */

html.sq-team-modal-open {
	overflow: hidden;
}

.sq-team-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.sq-team-modal[hidden] {
	display: none;
}

.sq-team-modal__backdrop {
	position: fixed;
	inset: 0;
	background: var(--color-purple--4-75);
}

.sq-team-modal__panel {
	position: fixed;
	inset: 3.2rem 0 0 0;
	width: 100%;
	background: var(--color-white);
	color: var(--color-purple--4);
	border-radius: 3.2rem 3.2rem 0 0;
	display: flex;
	flex-direction: column;
}

.sq-team-modal__header {
	flex: 0 0 auto;
	height: 7.2rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 var(--gutter);
}

.sq-team-modal__header.is-scrolled {
	border-bottom: 0.1rem solid var(--border-color);
}

.sq-team-modal__close {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.sq-team-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.6rem var(--gutter) 6.4rem;
}

.sq-team-modal__photo {
	width: 100%;
	height: auto;
	display: block;
}

.sq-team-modal__content {
	display: flex;
	flex-direction: column;
	margin-top: 1.6rem;
}

.sq-team-modal__name {
	color: var(--color-purple--1);
	margin-bottom: 0.8rem;
}

.sq-team-modal__job-title {
	color: var(--color-grey--4);
	margin-bottom: 1.6rem;
}

.sq-team-modal__linkedin {
	flex-direction: row-reverse;
	gap: 0.8rem;
	margin-top: 1.6rem;
}

.sq-team-modal__linkedin .sq-link__icon-container {
	margin-left: 0;
}

@media only screen and (min-width: 1000px) {
	:where(body.scroll_horizontal) .sq-team-modal__panel {
		inset: 0 0 0 auto;
		max-width: 53.2rem;
		border-radius: 4.8rem 0 0 0;
	}

	:where(body.scroll_horizontal) .sq-team-modal__header {
		justify-content: flex-start;
		height: 9.6rem;
		padding: 0 2.4rem;
	}

	:where(body.scroll_horizontal) .sq-team-modal__body {
		padding: 0 2.4rem 6.4rem;
	}

	:where(body.scroll_horizontal) .sq-team-modal__content {
		margin-top: 3.2rem;
	}
}