コンテンツ単位でブレイクポイントを変更

モバイル用レイアウトからPC用レイアウトに切り替わるブレイクポイントを768pxに設定した場合、768px～900px前後の画面幅の環境では事前に用意されているPC用レイアウトをそのまま縮小したのではレイアウトが維持できなかったり、可読性が損なわれる箇所がところどころ発生することがある。
このような場合、大きくレイアウトが変わるメジャーブレイクポイントの他にいくつか段階的にブレイクポイントをあらかじめ用意しておき、パーツ単位でモバイル向け・PC向けのレイアウトを切り替えるブレイクポイントを変更したり、カラム数を変更したりするなどして対応する。

【ブレイクポイント設定例】
small：576px
medium：768px　★基本のブレイクポイント
large：992px
x-large：1200px
xx-large：1400px

@media screen and (min-width: 768px) {
  .cardList__item {
    width: calc((100% - 30px) / 2);  //768～902pxの場合は2カラムに
  }
}
@media screen and (min-width: 992px) {
  .cardList__item {
    width: calc((100% - 60px) / 4);  //992px以上の場合は4カラムに
  }
}