/*
 * am-feature — an alternating media + text row for explaining a service or step.
 * Stacked on mobile; media beside text from md up. Add --reverse on every other
 * row so successive features alternate sides.
 *   am-feature [--reverse] > (am-feature__media > img, am-feature__body)
 */

.am-feature {
	display: flex;
	flex-direction: column;
	gap: var(--am-space-500);
}

@media (min-width: 768px) {
	.am-feature {
		flex-direction: row;
		align-items: center;
		gap: var(--am-space-700);
	}

	.am-feature--reverse {
		flex-direction: row-reverse;
	}

	.am-feature__media,
	.am-feature__body {
		flex: 1 1 0;
	}
}

.am-feature__media img {
	width: 100%;
	height: auto;
	border-radius: var(--am-radius-lg);
}

.am-feature__body > :first-child {
	margin-block-start: 0;
}