#problem {
	color-scheme: dark;
	display: flex;
	flex-flow: column;
	justify-content: end;
	align-items: start;
	background: #4d493f url(../images/child-lost.jpg) 100% 100% / 100% auto no-repeat border-box;
	color: white;
	text-shadow: 0 .1em .3em hsl(0 0% 0% / 0.3);
	padding-block: 1em;
	padding-inline-end: 32%;
	margin-block-end: 1em;
	min-height: min(70vh, 50vw);

	h1 {
		display: flex;
		flex-flow: column;
		gap: 1em;
		flex: 1;
		padding: 0;
		padding-inline-start: .5em;
		margin: 0;
		text-align: left;

		> small {
			background: rgb(0 0 0 / .8);
			padding: 1rem;
			max-width: 23.5em;
		}

		> strong {
			margin-block-start: auto;
		}

		mark {
			--mark-color: rgb(0 0 0 / .7);
		}
	}

	@media (width > 50em) {
		padding-block: 2em;
		padding-inline-start: 2em;
	}

	@media (width < 50em) {
		padding-inline-end: 1em;

		h1 {
			> small {
				max-width: none;
			}

			> strong {
				padding-inline-end: 32%;
			}
		}
	}

	@media (width < 50em) and (width > 29rem) {
		/* Don’t chop off head */
		background-position: 100% 80%;
	}
}

#fact {
	display: flex;
	flex-flow: column-reverse;
	align-items: end;

	h2 {
		text-align: center;
		margin: 0;

		.label {
			display: block;
			margin-inline: auto;
		}
	}

	@media (min-width: 70em) {
		flex-flow: row;

		h2 {
			text-align: end;

			.label {
				display: block;
				margin-inline-end: 0;
			}
		}

		img {
			max-width: 50em;
		}
	}
}

#solution {
	> h1 {
		.label {
			background: var(--color-green);
		}
	}

	> ul {
		display: grid;
		gap: 1em;

		@media (min-width: 60em) {
			grid-template-columns: repeat(2, 1fr);
		}

		> li {
			flex: 1 calc(50% - 2em);

			padding-inline-start: .5em;

			> strong {
				display: block;
				font-size: 135%;
			}

			> small {
				display: block;
				font-size: 100%;
			}
		}
	}
}

#how-it-works {
	.steps li > strong {
		display: block;
		font-size: var(--font-size-xl);
		line-height: 1.15;
		font-weight: 700;
		color: var(--color-green);
		font-family: var(--font-handwriting);
	}
}

#about {
	> figure {
		float: right;
		max-width: calc(5em + clamp(5em, 15vw, 15em));
		margin-inline-start: 1rem;
		margin-inline-end: 1rem;
		margin-top: 0;

		> img {
			padding: .5em;
			background: white;
			box-shadow: 0 .1em .6em -.3em hsl(0 0% 0% / 0.5);


		}

		> figcaption {
			margin-block-start: 1em;
			padding-inline-start: .5rem;
		}
	}
}