How do I make this grid responsive, especially for mobile and smaller screens

I'm trying to make my 1 row grid responsive so that it will turn into multiple rows when the screen or window is smaller or shrinks, but I can't seem to figure it out. I have a feeling now that I'm this far into this that making this part of the website a grid may not have been the most optimal thing to to do, but I'm not very experienced in this field, and I'd prefer to keep it a grid for now. Regardless, no matter what I've tried the grid stays 1 row or loses it's formatting. Hopefully someone else has more knowledge in this area they wouldn't mind sharing.

Here is my HTML:

  <div class="home-grid-container">
    <div class="home-grid-container__slide">
      <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf33category.jpg" alt="CF-33 Product" title="CF-33 Product Category"></a>
      <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">Panasonic CF-33</a></button>
    </div>
    <div class="home-grid-container__slide">
      <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf54category.jpg" alt="CF-54 Product" title="CF-54 Product Category"></a>
      <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-54</a></button>
    </div>
    <div class="home-grid-container__slide">
      <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf31category.jpg" alt="Cf-31 Product" title="CF-31 Product Category"></a>
      <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31">Panasonic CF-31</a></button>
    </div>
    <div class="home-grid-container__slide">
      <a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1"><img src="https://www.bobjohnson.com/product_images/uploaded_images/fzg1category.jpg" alt="FZ-G1 Product" title="FZ-G1 Product Category"></a>
      <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1">Panasonic FZ-G1</a></button>
    </div>
    <div class="home-grid-container__slide">
      <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-53"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf53category.jpg" alt="CF-53 Product" title="CF-53 Product Category"></a>
      <button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-53</a><button>
  </div>

and here is my CSS

.home-grid-container {
    background-color: #fff;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center;
    column-gap: 10px;
    h3 {
        color: #1f588f;
        font-weight: 700;
        font-size: 15px;
        margin: 0 0 0 0;
        text-align: center;
        vertical-align: top;
    }

    a {
        text-decoration: none;
        color: #fff;
    }

    a:visited {
        color: #fff;
    }

    button {
        margin: 1rem 0 1rem;
    }
}

.home-grid-container__slide {
    max-height: 300px;
    max-width: 300px;
}

.homepage-category-button {
    width: 12rem;
}

you have to play with the grid-template-columns in the @media

here I defined it in home-grid-container for the smallest. First change is at 600px, after 992....

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

h3 {
  color: #1f588f;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 0 0;
  text-align: center;
  vertical-align: top;
}

a {
  text-decoration: none;
  color: #fff;
}

a:visited {
  color: #fff;
}

button {
  margin: 1rem 0 1rem;
}

.home-grid-container {
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: center;
  column-gap: 10px;
}

@media (min-width: 390px) {}

@media (min-width: 600px) {
  .home-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .home-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .home-grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1400px) {
  .home-grid-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

.home-grid-container__slide,
.home-grid-container__slide img {
  max-height: 300px;
  max-width: 300px;
}

.homepage-category-button {
  width: 12rem;
}

<!-- language: lang-html -->

<div class="home-grid-container">
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">
      <img src="https://www.bobjohnson.com/product_images/uploaded_images/cf33category.jpg" alt="CF-33 Product" title="CF-33 Product Category">
    </a>
    <button class="homepage-category-button button button--primary">
            <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">Panasonic CF-33</a>
        </button>
  </div>
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">
      <img src="https://www.bobjohnson.com/product_images/uploaded_images/cf54category.jpg" alt="CF-54 Product" title="CF-54 Product Category">
    </a>
    <button class="homepage-category-button button button--primary">
            <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-54</a>
        </button>
  </div>
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31">
      <img src="https://www.bobjohnson.com/product_images/uploaded_images/cf31category.jpg" alt="Cf-31 Product" title="CF-31 Product Category">
    </a>
    <button class="homepage-category-button button button--primary">
            <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31">Panasonic CF-31</a>
        </button>
  </div>
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1">
      <img src="https://www.bobjohnson.com/product_images/uploaded_images/fzg1category.jpg" alt="FZ-G1 Product" title="FZ-G1 Product Category">
    </a>
    <button class="homepage-category-button button button--primary">
            <a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1">Panasonic FZ-G1</a>
        </button>
  </div>
  <div class="home-grid-container__slide">
    <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-53">
      <img src="https://www.bobjohnson.com/product_images/uploaded_images/cf53category.jpg" alt="CF-53 Product" title="CF-53 Product Category">
    </a>
    <button class="homepage-category-button button button--primary">
            <a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-53</a>
        </button>
  </div>
</div>

<!-- end snippet -->