【CSS】画像を並べた時、親のwidth領域を越したら2段目に配置するようにしたい

いまRailsを使って画像を並べてるのですが、画像が横領域に応じて縮小してしまいます。
li要素を一定にして、親のwidth幅を越したら2段目に持っていきたいです。

Railsのコードは以下の通りです。

//top.html.slim
            ul.wrapper
                - @characters.each do |character|
                    li
                        = link_to character_path(character.id) do
                            .image
                                = image_tag "#{character.image_path}"

これをHTMLとCSSに直すと以下の通りになります。
HTMLの構成

<ul class="wrapper">
  <li>
    <a href="パス"></a>
  </li>

<!--li要素があと5つあります-->

CSS

.wrapper {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    justify-content: space-around;
    margin-bottom: 80px;

    li {
    width: 320px;
    overflow: hidden;
    background-color: #fbfbfb;
    border: solid 1px #e6e6e6;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    border-radius: 12px;

    a {
      position: relative;
      display: block;
      text-decoration: none;
      color: #222222;
      height: 100%;
    }
  }
}

上の段を画像4枚にして、下の段を画像2枚にしたいです。
どのようにしたらよろしいでしょうか？

何卒よろしくお願いいたします。