Breakpoints (반응형 브레이크포인트)

import { Button, Badge } from "@vortex/ui-cals";
 
export default function BookingCalendar() {
  return (
    <section className="py-2xl px-md">
      <div className="max-w-screen-xl mx-auto">
        <h2 className="text-2xl md:text-3xl font-bold mb-xl">예약 현황</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-md">
          <div className="p-md bg-white border rounded-lg">
            <Badge variant="booking-available">예약 가능</Badge>
            <p className="text-lg font-semibold mt-sm">48건</p>
          </div>
          <div className="p-md bg-white border rounded-lg">
            <Badge variant="booking-pending">예약 대기</Badge>
            <p className="text-lg font-semibold mt-sm">12건</p>
          </div>
          <div className="p-md bg-white border rounded-lg">
            <Badge variant="booking-confirmed">예약 확정</Badge>
            <p className="text-lg font-semibold mt-sm">35건</p>
          </div>
          <div className="p-md bg-white border rounded-lg">
            <Badge variant="booking-completed">예약 완료</Badge>
            <p className="text-lg font-semibold mt-sm">89건</p>
          </div>
        </div>
      </div>
    </section>
  );
}