css - Responsive overlapping images move to the next line

Question

I trying to do responsive overlapping of images that will go to the next line based on the screen size. Instead of moving the images to a new line, it compresses the images and the distance between them. I would like the gap to remain the same and the images to go to a new line. My CSS is basic so hopefully, it's not horrible.

.card-row-wrap {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.card-row-outer {
  display: block;
  top: 40px;
  width: 90%;
}

.card-row {
  position: relative;
  min-height: 220px;
  margin-bottom: 0px;
}

.card {
  float: left;
  position: relative;
  z-index: 100;
  cursor: pointer;
  width: 117px;
  margin-right: -117px;
  margin-bottom: 20px;
  border-radius: 9px;
  left: 0px;
  top: 20px;
  z-index: 100;
  display: inline;
}

.card img {
  height: 220px;
  border-radius: 10px;
  border: grey 2px solid;
}

.card:hover {
  top: 0px;
  filter: brightness(50%);
}

.card-oracle-image-hidden {
  display: none;
}

<div class="cards-row-wrap">
  <div class="card-row-outer">
    <div class="card-row">
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
      <span class="card" style="margin-left: 4%;">
        <img src="https://picsum.photos/200/300" />
      </span>
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/65910084/responsive-overlapping-images-move-to-the-next-line

Answer 1

Waitting for answers