التصميم المتجاوب

<div class="text-base md:text-lg lg:text-xl">
  يكبر النصّ مع حجم الشاشة
</div>

<!-- عمود على الجوّال، صفّ على الحاسوب -->
<div class="flex flex-col md:flex-row gap-4">...</div>

<!-- شبكة متجاوبة -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">...</div>

<!-- إخفاء/إظهار -->
<nav class="hidden md:flex">قائمة الحاسوب</nav>
<button class="md:hidden">☰ قائمة الجوّال</button>