/*
 * Secao "Quem conduz o projeto?" (about__page), replicada do site principal
 * (quem-e-ana.php / css/style.css). Escopada em #about__page.
 */

#about__page {
	--ana-background-color: #ebe9d7;
	--ana-title-color: #3a2a1a;
	--ana-primary-text: "Montserrat Alternates", sans-serif;
	--ana-terciary-text: "Montserrat", sans-serif;

	padding: 9rem 1rem 7rem;
}

#about__page .about__page__container {
	display: flex;
	align-items: center;
	justify-content: center;
}

#about__page .about__page__content {
	background-color: var(--ana-background-color);
	width: 100%;
	max-width: 1270px;
	border-radius: 89px 55px 730px 45px;
	min-height: 999px;
	padding: 3rem 4.5rem;
}

#about__page .about__page__content__title {
	font-family: var(--ana-primary-text);
	font-size: 2.625rem;
	font-weight: 700;
	color: var(--ana-title-color);
	margin-bottom: 1.25rem;
}

#about__page .about__page__content__text {
	font-family: var(--ana-terciary-text);
	font-size: 1.75rem;
	font-weight: 400;
	color: var(--ana-title-color);
	width: 100%;
	max-width: 683px;
	margin-bottom: 2.25rem;
}

#about__page .about__page__content__text--right {
	text-align: right;
}

#about__page .about__page__image {
	margin-left: -26rem;
	margin-top: -12rem;
}

#about__page .about__page__image__mobile {
	display: none;
}

/* 1650px */
@media (max-width: 1650px) {
	#about__page .about__page__content__title {
		font-size: 2.3rem;
	}

	#about__page .about__page__content__text {
		font-size: 1.575rem;
		max-width: 615px;
	}

	#about__page .about__page__image {
		max-width: 655px;
	}
}

/* 1400px */
@media (max-width: 1400px) {
	#about__page {
		padding: 7rem 1.5rem 6rem;
	}

	#about__page .about__page__content {
		max-width: 1100px;
		padding: 3rem 4rem;
	}

	#about__page .about__page__content__title {
		font-size: 1.75rem;
	}

	#about__page .about__page__content__text {
		font-size: 1.35rem;
		max-width: 490px;
	}

	#about__page .about__page__image {
		margin-left: -22rem;
		max-width: 570px;
	}
}

/* 1200px */
@media (max-width: 1200px) {
	#about__page .about__page__content {
		padding: 3rem 2.5rem;
	}

	#about__page .about__page__image {
		margin-left: -15rem;
		margin-top: 2rem;
		max-width: 40%;
	}

	#about__page .about__page__container {
		align-items: flex-start;
	}
}

/* 991px */
@media (max-width: 991px) {
	#about__page .about__page__content__title {
		font-size: 1.5rem;
	}

	#about__page .about__page__content__text {
		font-size: 1.15rem;
		max-width: 60%;
		margin-bottom: 1.5rem;
	}

	#about__page .about__page__content {
		min-height: 875px;
	}
}

/* 768px */
@media (max-width: 768px) {
	#about__page {
		padding: 5rem 0.75rem 4rem;
	}

	#about__page .about__page__container {
		max-width: 441px;
		margin: 0 auto;
	}

	#about__page .about__page__content {
		border-radius: 24px;
		padding: 2.5rem 1rem;
		min-height: auto;
	}

	#about__page .about__page__content__title {
		font-size: 1.5rem;
		font-weight: 600;
		text-align: center;
	}

	#about__page .about__page__content__text {
		font-size: 1rem;
		margin-bottom: 1.25rem;
		max-width: 100%;
	}

	#about__page .about__page__content__text strong {
		font-weight: 600;
	}

	#about__page .about__page__image {
		display: none;
		max-width: 400px;
	}

	#about__page .about__page__image__mobile__container {
		border-radius: 100px 100px 0 0;
		width: 45%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	#about__page .about__page__image__mobile {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#about__page .about__page__content__sub {
		display: flex;
		align-items: stretch;
		gap: 0.55rem;
		margin-bottom: 1rem;
	}

	#about__page .about__page__content__sub__content {
		width: 55%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 1rem;
	}

	#about__page .about__page__content__sub__content p {
		margin: 0;
	}
}

/* 480px */
@media (max-width: 480px) {
	#about__page .about__page__content__title {
		font-size: 1.35rem;
	}

	#about__page .about__page__content__text {
		font-size: 0.85rem;
	}

	#about__page .about__page__content__text--right {
		padding-right: 0.3rem;
	}

	#about__page .about__page__image {
		max-width: 300px;
		margin-top: -9rem;
	}
}

/* 395px */
@media (max-width: 395px) {
	#about__page .about__page__content__text {
		font-size: 0.77rem;
	}
}

/* 370px */
@media (max-width: 370px) {
	#about__page .about__page__content__text {
		font-size: 0.7rem;
	}
}

/* 350px */
@media (max-width: 350px) {
	#about__page .about__page__content__text {
		font-size: 0.65rem;
	}
}