【クリエイターモード】テンプレートGardenでトップページの商品画像の並びを揃える方法を教えてください。

テンプレート【Garden】のトップページの商品画像はマウスオーバーで大きく表示し、
商品の並びをずらして表示する動きのあるデザインです。

こちらの「新商品」、「おすすめ商品」、「ランキング」の商品画像のマウスオーバーでの拡大を外し
並びをずらさずに表示したい場合は、CSSを変更してください。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
「CSS」欄の末尾に下記を追記し、表示を調整してください。

追記例）

@media screen and (min-width: 769px) {
  #new-item li,
  #recommend-item li,
  #ranking-item li{
    width: 32%!important;
    height: 533px!important;
    display: block;
    background: #fff;
    float: left;
    margin-right: 10px;
    margin-top: 20px!important;
  }

  #new-item li:nth-child(3n),
  #recommend-item li:nth-child(3n),
  #ranking-item li:nth-child(3n){
    margin-right: 0px!important;
  }

  #new-item figure,
  #recommend-item figure,
  #ranking-item figure{
    width: 100%;
    height: auto;
    overflow: visible;
  }

  #new-item figure img,
  #recommend-item figure img,
  #ranking-item figure img{
    transition: none;
    object-fit: contain;
  }

  #new-item figure img:hover,
  #recommend-item figure img:hover,
  #ranking-item figure img:hover{
    transform: none;
    transition: none;
  }
}

表示例）