/* PROFILES */

.PROFILES::before,
.PROFILES::after {
	content: "";
	display: block;
	overflow: hidden;
}

.PROFILES .profile {
	position: relative;
}

.PROFILES .profile button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: 0;
	opacity: 0;
	cursor: pointer;
}

.PROFILES .modal {
	display: none;
}



/* default */

.PROFILES[data-variant="default"] .b-columns {margin: 0;}
.PROFILES[data-variant="default"] .b-column {padding: 0;}

.PROFILES[data-variant="default"] .profile {
	height: var(--height, calc(100% + 1px));
	border-radius: var(--s4);
	background: var(--purple-blue-gradient);
	box-sizing: border-box;
	margin: 0 -1px -1px 0;
	overflow: hidden;
	position: relative;
	padding: var(--s5);
	display: flex;
	flex-direction: column;
}

.PROFILES[data-variant="default"] .profile::before {
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
	background: var(--white);
	border-radius: calc(var(--s4) - 1px);
}

.PROFILES[data-variant="default"] .image {
	overflow: hidden;
	position: relative;
	border-radius: var(--s3);
	margin-bottom: var(--s3);
}


.PROFILES[data-variant="default"] .content {
	position: relative;
	flex-grow: 1;
}

.PROFILES[data-variant="default"] .role {
	margin-top: var(--s1);
	padding-right: var(--s5);
	opacity: 0.8;
}

.PROFILES[data-variant="default"] .linkedin {
	position: absolute;
	bottom: -6rem;
	right: -6rem;
}

.PROFILES[data-variant="default"] .linkedin a {
	display: block;
	width: var(--s5);
	height: var(--s5);
	color: var(--blue-500);
}

.PROFILES[data-variant="default"] .linkedin a svg {
	padding: 4rem;
}

.PROFILES[data-variant="default"] .linkedin a:hover {
	color: var(--blue-900);
}



/* post */

.PROFILES[data-variant="post"] .b-column {
	width: var(--col-2);
	box-sizing: content-box;
}

.PROFILES[data-variant="post"] .image {
	overflow: hidden;
	border-radius: 999rem;
	max-width: var(--s10);
	margin: 0 0 var(--s1) 0;
	background: var(--white);
}

.PROFILES[data-variant="post"] .role {
	margin-top: var(--s1);
	opacity: 0.8;
}

.PROFILES[data-variant="post"] .linkedin {
	margin: 4rem -2rem 0;
}

.PROFILES[data-variant="post"] .logo {
	margin-top: var(--s1);
	max-width: var(--s9);
}

.PROFILES[data-variant="post"] .logo img {
	object-fit: contain;
	object-position: center left;
}


@media screen and (min-width: 961px) {
	.POST-SECONDARY .PROFILES[data-variant="post"] {margin-top: var(--s5);}
	.POST-SECONDARY .PROFILES[data-variant="post"] .b-column {width: 100%;}
	.POST-SECONDARY .PROFILES[data-variant="post"] .profile {display: flex; align-items: center;}
	.POST-SECONDARY .PROFILES[data-variant="post"] .image {margin: 0 var(--s5) 0 0;}
}

@media screen and (max-width: 1440px) {
	.PROFILES[data-variant="post"] .image {max-width: var(--s9);}
	.PROFILES[data-variant="post"] .name {font-size: 18rem;}
}

@media screen and (max-width: 960px) {
	.PROFILES[data-variant="post"] .b-column {width: 50%; box-sizing: border-box;}
}



/* container */ 

.b-container[data-layout] .PROFILES .profile {border-radius: var(--s2); padding: var(--s2); }
.b-container[data-layout] .PROFILES[data-variant="default"] .profile::before {border-radius: calc(var(--s2) - 1px);}



/* PROFILE-MODAL */

.PROFILE-MODAL {
	position: relative;
	margin: 0 auto;
	width: var(--col-8);
	max-width: 100%;
}

.PROFILE-MODAL .wrapper {
	overflow: hidden;
	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;
	border-radius: var(--s3);
}

.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: 0 0 var(--s3); border-radius: 0;}
	.PROFILE-MODAL .biography {margin-top: var(--s3);}
	.PROFILE-MODAL .linkedin {margin-top: var(--s3);}
}