/* =========================================
ABOUT PAGE
========================================= */

.about-section {
	background: #000;
    color: #fff;
	
	width: min(1200px, 94%);
	margin: 0 auto;

	padding: 50px 30px;

	box-sizing: border-box;
}



/* =========================================
ABOUT INTRODUCTION
========================================= */

.about-intro {
	text-align: center;

	padding-top: 50px;
	padding-bottom: 40px;
}

.about-intro h1 {
	margin-top: 0;
	margin-bottom: 25px;
}

.about-intro p {
	max-width: 850px;
	margin: 12px auto;

	line-height: 1.6;
}

/* =========================================
SECTION HEADINGS
========================================= */

.about-section h2 {
	margin-top: 0;
	margin-bottom: 35px;

	text-align: center;
}

/* =========================================
CREW MEMBERS
========================================= */

.crew-section {
	border-top: 1px solid #333;
}

.crew-member {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 30px;

	margin-bottom: 20px;

	background: #111;

	border: 1px solid #333;
	border-radius: 6px;
	box-sizing: border-box;
}

.rotating-fact {
    transition: opacity 0.25s ease;
}

.rotating-fact.fact-changing {
    opacity: 0;
}

/* =========================================
CREW PROFILE IMAGE
========================================= */

.crew-image {
	flex: 0 0 150px;


	width: 150px;
	height: 150px;
}

.crew-image img {
    display: block;

    width: 150px;
    height: 150px;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 50%;
}

/* =========================================
CREW INFORMATION
========================================= */

.crew-info {
	flex: 1;
}

.crew-info h3 {
	margin-top: 0;
	margin-bottom: 18px;
	font-size: 24px;
}

.crew-mana-symbol {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.crew-info p {
	margin: 8px 0;
	line-height: 1.5;
}

.crew-info strong {
	font-weight: 600;
}

/* =========================================
COLLABORATORS
========================================= */

.collaborators-section {
	border-top: 1px solid #333;
	padding-bottom: 80px;
}

.collaborator {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 30px;

	margin-bottom: 20px;

	background: #111;

	border: 1px solid #333;
	border-radius: 6px;

	box-sizing: border-box;
}

/* =========================================
COLLABORATOR IMAGE
========================================= */

.collaborator-image {
	flex: 0 0 150px;
	width: 150px;
	height: 150px;
}

.collaborator-image img {
	display: block;
	width: 150px;
	height: 150px;

	object-fit: contain;

	border-radius: 50%;
}

/* =========================================
COLLABORATOR INFORMATION
========================================= */

.collaborator-info {
	flex: 1;
}

.collaborator-info h3 {
	margin-top: 0;
	margin-bottom: 18px;
	font-size: 24px;
}

.collaborator-info p {
	margin: 8px 0;
	line-height: 1.5;
}

.collaborator-link {
	margin-top: 20px !important;
}

.collaborator-link a {
	color: #eee;
	text-decoration: underline;
}

.collaborator-link a:hover {
	color: #fff;
}


/* =========================================
MOBILE
========================================= */

@media (max-width: 768px) {


	.about-section {
		width: 100%;

		padding: 25px 15px 60px;
	}


	/* =====================================
	INTRO
	===================================== */

	.about-intro {
		padding-top: 30px;
	}

	.about-intro h1 {
		font-size: 30px;
	}


	/* =====================================
	CREW
	===================================== */

	.crew-section h2,
	.collaborators-section h2 {
		margin-bottom: 25px;
	}

	.crew-member {
		flex-direction: column;

		gap: 20px;

		padding: 25px 20px;

		text-align: center;
	}

	.crew-image {
		flex: none;

		width: 130px;
		height: 130px;

		margin-left: auto;
		margin-right: auto;
	}



	.crew-image img {
		width: 130px;
		height: 130px;
	}

	.crew-info {
		width: 100%;
	}

	.crew-info h3 {
		
		font-size: 22px;

		margin-bottom: 15px;
	}

	.crew-info p {
		line-height: 1.5;
	}
	
	.rotating-fact {
		transition: opacity 0.25s ease-in-out;
	}

	.rotating-fact.fact-changing {
		opacity: 0;
	}

	/* =====================================
		COLLABORATORS
	===================================== */

	.collaborator {
		flex-direction: column;

		gap: 20px;

		padding: 25px 20px;

		text-align: center;
	}

	.collaborator-image {
		flex: none;

		width: 130px;
		height: 130px;
	}

	.collaborator-image img {
		width: 130px;
		height: 130px;
	}

	.collaborator-info {
		width: 100%;
	}

	.collaborator-info h3 {
		font-size: 22px;

		margin-bottom: 15px;
	}


}