@layer layout {
	.container {
		margin-inline: auto;
		width: 100%;
		max-width: var(--content-width);
		padding-inline: 1rem;
	}
	@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
	@media (min-width: 1024px) { .container { padding-inline: 2rem; } }

	.section { padding-block: 3.5rem; }
	@media (min-width: 640px) { .section { padding-block: 5rem; } }
	.section--muted { background-color: var(--color-secondary); }

	.section__heading {
		font-size: 1.5rem;
		color: var(--color-foreground);
	}
	@media (min-width: 640px) { .section__heading { font-size: 1.875rem; } }
	.section__subheading {
		margin-top: 0.75rem;
		color: var(--color-muted-foreground);
		max-width: 42rem;
	}

	.card-grid, .differentiator-grid, .subject-grid, .trust-grid {
		display: grid;
		gap: 1.5rem;
		margin-top: 2.5rem;
		grid-template-columns: 1fr;
	}
	@media (min-width: 640px) {
		.card-grid, .subject-grid, .trust-grid { grid-template-columns: repeat(2, 1fr); }
		.differentiator-grid { grid-template-columns: repeat(2, 1fr); }
	}
	@media (min-width: 1024px) {
		.card-grid, .subject-grid { grid-template-columns: repeat(3, 1fr); }
		.differentiator-grid { grid-template-columns: repeat(3, 1fr); }
	}
	.trust-grid { margin-top: 0; }
	@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

	.process-grid {
		display: grid;
		gap: 1.5rem;
		margin-top: 2.5rem;
		grid-template-columns: 1fr;
	}
	@media (min-width: 640px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }
}