/* ==========================================================
   Global responsive adjustments
   (Component-specific breakpoints live in their own files)
   ========================================================== */

@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	:root {
		--sp-section: 3rem;
	}

	h1 { font-size: var(--fs-3xl); }
	h2 { font-size: var(--fs-2xl); }
	h3 { font-size: var(--fs-xl);  }

	.container {
		padding-inline: var(--sp-md);
	}

	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.grid-2 { grid-template-columns: 1fr; }
	.grid-3 { grid-template-columns: 1fr; }
	.grid-4 { grid-template-columns: 1fr; }
}