scssのネストと複数クラス

ネストの場合

<divclass="component"><divclass="items"><divclass="item">アイテム1
       </div><divclass="item">アイテム2
       </div><divclass="item">アイテム3
       </div></div></div>

.component{margin: auto;
  .items{display: flex;
    justify-content: center;
   gap: 10px;
     .item{width:200px;
       height: 100px;
    }}}

複数classの場合

<divclass="component part-1"><divclass="items games"><divclass="item game">アイテム1
       </div><divclass="item game">アイテム2
       </div><divclass="item game">アイテム3
       </div></div></div>

.component.part-1{margin: auto;
  .items.games{display: inline-block;
    margin-inline: 10px;
    .item.game{width: 100px;
      height: 50px;
     }}}