<section class="shows">

  
  <div class="columns columns--11 space-around">
    <h2 class="huge">Shows</h2>
  </div>

  {{ range .Site.Params.shows }}
  <div class="show" data-date="{{ .date }}">

    <a href="{{ .url }}" target="_blank" aria-label="{{ .title }}">
      <div class="show__head">
        <h4 class="show__date">{{ .date }}</h4>
        <h3 class="show__title">{{ .title }}</h3>
      </div>

      <picture>
        <source srcset="{{ printf "shows/%s.webp" .img }}" type="image/webp">
        <source srcset="{{ printf "shows/%s.jpg" .img }}" type="image/jpeg"> 
        <img class="show__image" src="{{ printf "shows/%s.jpg" .img }}" alt="{{ .title }}" loading="lazy">
      </picture>
    </a>

  </div>
  {{ end }}

  <script type="text/javascript">
  console.log('NERDDISCO')

  // var shows = document.querySelectorAll('.shows')

  // shows.map(show => {
  //   console.log(show)
  // })
  
  </script>

</section>
<section class="shows">

  
  <div class="columns columns--11 space-around">
    <h2 class="huge">Shows</h2>
  </div>

  <div class="columns columns--fit space-around">

    {{ range .Site.Params.shows }}
    <div class="show" data-date="{{ .date }}">

      <a href="{{ .url }}" target="_blank" aria-label="{{ .title }}">
        <div class="show__head">
          <h4 class="show__date">{{ .date }}</h4>
          <h3 class="show__title">{{ .title }}</h3>
        </div>

        <picture>
          <source srcset="{{ printf "shows/%s.webp" .img }}" type="image/webp">
          <source srcset="{{ printf "shows/%s.jpg" .img }}" type="image/jpeg"> 
          <img class="show__image" src="{{ printf "shows/%s.jpg" .img }}" alt="{{ .title }}" loading="lazy">
        </picture>
      </a>

    </div>
    {{ end }}

  </div>

  <script type="text/javascript">
  console.log('NERDDISCO')

  // var shows = document.querySelectorAll('.shows')

  // shows.map(show => {
  //   console.log(show)
  // })
  
  </script>

</section>
Make sure to use a grid
feat(show): Make sure to use a grid
