// Styling changes
<div className="w-full px-4 md:w-[468px] md:px-0">

// Layout direction
<div className="flex flex-col gap-4 md:flex-row md:gap-6">

// Visibility
<div className="hidden md:block">Desktop only</div>

import { useIsPhone } from "@/hooks/useIsPhone";

const { isPhonePortrait } = useIsPhone();

// Different component
if (isPhonePortrait) {
  return <BottomSheet>{content}</BottomSheet>;
}
return <SideDialog>{content}</SideDialog>;

// Different props
<DialogContent
  side={isPhonePortrait ? "bottom" : "right"}
  size={isPhonePortrait ? "full" : "md"}
/>

// Device detection
const { isPhone, isPhonePortrait, isPhoneLandscape } = useIsPhone();

// Custom queries
const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");

// Constants
import { QUERY_IS_PHONE_PORTRAIT } from "@/constants/responsiveness";