/* PROFILES */

.PROFILES::before,
.PROFILES::after {
	content: "";
	display: block;
	overflow: hidden;
}

.PROFILES .profile {
	position: relative;
	padding: var(--s5);
    background: var(--green-100);
    border-radius: var(--s1);
	height: 100%;
	box-sizing: border-box;
}

.PROFILES .profile button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: 0;
	opacity: 0;
	cursor: pointer;
}

.PROFILES .image {
	margin: 0 0 var(--s5) 0;
	border-radius: var(--s1);
	overflow: hidden;
}

.PROFILES .modal {
	display: none;
}

.PROFILES .content h4 + h5 {
	margin-top: 0;
}

.PROFILES .content .role {
	color: var(--navy-300);
	font-size: 24rem;
	margin-bottom: var(--s5);
}

@media (width <= 960px) {
	.PROFILES .image {margin: 0 0 var(--s3) 0;}
	.PROFILES .content .role {font-size: 20rem;}
}



/* embla */

.PROFILES .embla[data-desktop] .embla__dots {
	right: auto;
	left: 0;
}

@media (width <= 960px) {
	.PROFILES .embla {padding-bottom: 0;}
	.PROFILES .embla__buttons .embla__prev, .PROFILES .embla__next, .PROFILES .embla__dots {display: block;}
	.PROFILES .embla__dots {
		position: static;
		margin-bottom: var(--s6);
	}
	.PROFILES .embla__buttons {
		position: static;
		margin-top: var(--s5);
		left: auto;
		bottom: auto;
		justify-content: center;
	}
}



/* PROFILE-MODAL */

.PROFILE-MODAL {
	position: relative;
	margin: 0 auto;
	width: var(--col-10);
	max-width: 100%;
}

.PROFILE-MODAL .wrapper {
	background: var(--white);
	padding: var(--s7);
	display: flex;
	align-items: flex-start;
}

.PROFILE-MODAL .image {
	width: var(--col-3);
	margin: 0 var(--s6) 0 0;
	flex: 0 0 auto;
}

.PROFILE-MODAL .content {
	flex: 0 1 auto;
}

.PROFILE-MODAL .biography {
	margin-top: var(--s4);
}

.PROFILE-MODAL .linkedin {
	margin-top: var(--s4);
}

@media (width <= 960px) {
	.PROFILE-MODAL .wrapper {padding: var(--s3); display: block;}
	.PROFILE-MODAL .image {width: auto; float: none; margin: var(--ns3) var(--ns3) var(--s3);}
	.PROFILE-MODAL .biography {margin-top: var(--s3);}
	.PROFILE-MODAL .linkedin {margin-top: var(--s3);}
}
