/* ====
   PERSON
   ==== */	

.card__person {
	display: flex;  }

.card__person__image .image {
	border-radius: 50rem;
	overflow: hidden;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	margin-right: 3rem;
	transition: all .3s;}		
			
.card__person__image img {
	opacity: .95;
	transition: all .4s;
	max-width: 100%; }

.card__person__details__heading {
	padding-bottom: 1rem; }
	
.card__person__details {
	padding-bottom: var(--spacing__x); }

/* ACTIVE */
.active .card__person__image .image {
	width: 220px;
	height: 220px; }	

@media all and (max-width:550px) {	   		

	.active .card__person__image .image {
		width: 180px;
		height: 180px; }	
}

/* LIST */	
.list__people li {
	margin-bottom: 2rem; }	

.list__people li:last-of-type {
	margin-bottom: 0; }
		
.list__people .card__person {
	margin-bottom: 3rem;
	border-bottom: 2px solid var(--color__light-gray); }

.list__people .card__person.active {
	margin-bottom: 3.6rem; }

.list__people .card__person:last-of-type {
	margin-bottom: 0; }

.card__person  { 
	scroll-margin-top: 240px !important; }

@media all and (max-width:550px) {
	
	.card__person  { 
		scroll-margin-top: 120px !important; }
		
	.card__person {
		flex-wrap: wrap;  }
	
	.card__person__details {
		padding-top: 1rem;
		width: 100%; }
}