title: Horizontally scrolling gallery - CSS only
body: <p>Here's a website showing exactly what I need: <a href="http://kelseymcclellan.com" rel="nofollow noreferrer">kelseymcclellan.com</a></p>
  
  <p>But it's not in <strong>CSS</strong>.
  <br><br></p>
  
  <p>Here's a website that uses CSS only: <a href="http://www.olivercurtisphotography.co.uk" rel="nofollow noreferrer">olivercurtisphotography.co.uk</a></p>
  
  <p>But there are several limitations:
  <br>- the images are embedded as img
  <br>- the width of the gallery must be specified in px</p>
  
  <p>Instead, I need
  <br>- the images to be divs
  <br>- the gallery to adapt independently to the number of images
  <br><br></p>
  
  <p>Here's how I embed images:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="img ratio" style="background-image: url(image.jpg);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.img {
      background-size: cover;
  }
  
  .ratio:after {
      content: '';
      display: inline-block;
      padding-top: 66.6666667%;
  }
  </code></pre>
  
  <p>I found a lot of answers that achieve something similar to what I need, but none of them is close enough.</p>
  
  <p>How do I create a series of divs scrolling horizontally?</p>