ブレイクポイント／Break point

ウィンドウサイズに応じてスタイルを変更するためのブレイクポイントを設定。
lg（デスクトップ）・md（タブレット）・sm（モバイル）の3つの画面サイズによって、各コンポーネントのレイアウトが変化します。

<div class="grid grid--cols4 md:grid--cols2 sm:grid--cols1">
  <div class="grid__col">
    <div style="text-align: center;border: 1px solid #000;padding: 8px 0;">カラム数{lg:4,md:2,sm:1}</div>
  </div>
  <div class="grid__col">
    <div style="text-align: center;border: 1px solid #000;padding: 8px 0;">カラム数{lg:4,md:2,sm:1}</div>
  </div>
  <div class="grid__col">
    <div style="text-align: center;border: 1px solid #000;padding: 8px 0;">カラム数{lg:4,md:2,sm:1}</div>
  </div>
  <div class="grid__col">
    <div style="text-align: center;border: 1px solid #000;padding: 8px 0;">カラム数{lg:4,md:2,sm:1}</div>
  </div>

画面サイズ基準

lg（デスクトップ）：1025px〜
md（タブレット）：768px〜1024px
sm（モバイル）：〜767px