/*
 * Mission section.
 */

.mission {
	padding: var(--section-padding) var(--container-padding);
	background: var(--color-secondary);
	color: #ffffff;
	text-align: center;
}

.mission__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	align-items: center;
	gap: clamp(32px, 6vw, 72px);
	max-width: var(--container);
	margin: 0 auto;
}

.mission__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	max-width: 620px;
}

.mission__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mission__content:only-child {
	grid-column: 1 / -1;
}

.mission__title {
	color: #ffffff !important;
}

.mission__statement {
	max-width: 800px;
	margin: 0 auto;
	font-size: 1.6rem;
	font-style: italic;
	line-height: 1.6;
}

/* On mobile the button is already hidden in base.css and the image opens the modal. */
@media (min-width: 769px) {
	.mission .section-read-more {
		display: none;
	}
}