Hi :) Im building in ruby on rails a multiple column/row items per slide carousel. When the viewport width is higher than 576px each carousel slide must have 5 columns and 2 rows filled with images (10 images in total). But when the viewport width is lower than 576px each carousel slide must have 2 columns and 2 rows (So 4 images)

Im not sure how is the easiest way to do this if with JS or Css, can someone help me please?

HTML.SLIM

#current-clients-wrapper
  .container
    .wrapper
      h1 Customers using Slidesync

      div[class="carousel slide carousel-size" data-ride="carousel"]
        div[class="carousel-inner" role="listbox"]
          div[class="carousel-item item active"]
            div[class="client-logos d-block w-100"]
              - ["BASF", "DeutscheBahn", "DeutscheBundesBank", "eon", "Eurowings", "NTT", "p7s1", "Pfizer", "SWISS", "thyssenkrupp"].each do |item|
                div
                  img[src=asset_path("customers/#{item}.jpg") alt=""]
          div[class="carousel-item item"]
            div[class="client-logos d-block w-100"]
              - ["Airbus", "EQS-Group", "Habegger", "HugoBoss", "KION", "Linde-Group", "MediaBroadcast", "Swissport", "Uniper", "zf"].each do |item|
                div
                  img[src=asset_path("customers/#{item}.jpg") alt=""]

SCSS

#current-clients-wrapper {
  background-color: white;

  .carousel-item {
    padding: 0;
    margin: 0 auto;
    height: 100%;
  }
  .carousel-size {
    max-width: 750px;
    margin: 0 auto;
  }
  .client-logos {
    display: flex;
    flex-wrap: wrap;
    div {
      flex: 1 0 130px;

      img {
        padding-bottom: 30px;
      }
    }
  }
}

@media (max-width: 749px) {
  #current-clients-wrapper {
    .carousel-size {
      max-width: 576px;
    }
    .client-logos {
      div {
        flex: 1 0 100px;
      }
    }
  }
}