www/src/layouts/partials/package-grid.html

<!-- Package Grid -->

<section>

  <!-- Package Grid Header -->
  <hr>
    <div class="container package-grid-header">
      <h3>packages</h3>
    </div>
  <hr>
  <div class="container package-grid">

    <!-- Start Package Grid -->

    <div class="row package-row black-bg g-0">
      <div class="package-grid">
        {{ range $.Site.Data.packages }}
          {{- partial "package-thumbnail.html" .}}
        {{ end }}
      </div>
    </div>
  </div>
</section>

<style>
  .package-grid {
    display: grid;
    grid-template-columns: auto auto;
  }

  @media only screen and (min-width: 576px) {
    .package-grid {
      /* changes to 3 column thumbs */
      grid-template-columns: auto auto auto;
    }
  }

  @media only screen and (min-width: 992px) {
    .package-grid {
      /* changes to 4 column thumbs */
      grid-template-columns: auto auto auto auto;
    }
  }
</style>