/* ------------------------------------------------------------ *\
	Section Photo
\* ------------------------------------------------------------ */

.section-photo {
	/* flow-root stops the inner negative margin from collapsing through to the section */
	display: flow-root;
	position: relative;
	padding-top: calc(var(--stats-overlap) + var(--section-spacing));
	background: var(--c-green);

	/* The image hangs below the green background into the next section */
	.section__inner {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: flex-start;
		gap: 114px;
		margin-bottom: calc(var(--photo-overflow) * -1);
	}

	.section__media {
		flex: 0 1 499px;
	}

	.section__content {
		display: flex;
		flex: 0 1 626px;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: var(--b-space-big);
		border: 3px dashed var(--c-navy);
		border-radius: var(--border-radius);
		background: var(--c-white);
	}

	.section__text {
		font-size: var(--fs-h3);
	}
}

@media (max-width: 1199px) {
	.section-photo .section__inner {
		gap: 50px;
	}
}

@media (max-width: 1023px) {
	.section-photo {
		/* Content first, so the image keeps hanging below the green background */
		.section__inner {
			flex-direction: column-reverse;
			align-items: center;
			gap: 30px;
		}

		.section__media {
			flex: 0 0 auto;
			width: 100%;
			max-width: 420px;
		}

		.section__content {
			flex: 0 0 auto;
			width: 100%;
			max-width: 626px;
		}
	}
}

@media (max-width: 575px) {
	.section-photo {
		.section__inner {
			gap: 40px;
		}

		.section__content .button {
			text-align: left;
		}
	}
}