@vcl/vcl/gallery/demo/example-batched.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

<div class="gallery" touch-action="pan-y">
  <div class="gallery-content">
    <button class="button half-transparent gallery-prev-button">
      <div class="icogram">
        <div class="icon fas fa-caret-left" aria-hidden="true" aria-label="Previous" role="img"></div>
      </div>
    </button>
    <div class="row">
      <div class="w-25p">
        <div class="demoItem">
          <div>1</div>
        </div>
      </div>
      <div class="w-25p">
        <div class="demoItem">
          <div>2</div>
        </div>
      </div>
      <div class="w-25p">
        <div class="demoItem">
          <div>3</div>
        </div>
      </div>
      <div class="w-25p">
        <div class="demoItem">
          <div>4</div>
        </div>
      </div>
    </div>
    <button class="button half-transparent gallery-next-button">
      <div class="icogram">
        <div class="icon fas fa-caret-right" aria-hidden="true" aria-label="Next" role="img"></div>
      </div>
    </button>
  </div>
</div>

<style type="text/css">
.demoItem {
  text-align: center;
  border: 1px solid gray;
  width: 100%;
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.demoItem > div {
  font-size: 4em;
  flex: 0 0 auto;
}
</style>