.grid-container-sjh {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
/* Grid item images default styling */
.grid-item-sjh img {
    position: relative;
    width: 100%; /* Full width of its container */
    height: auto;
    display: block;
}

@media screen and (min-width: 531px) {
  .grid-item-sjh img {
      min-width: 300px;
      max-width: 400px;
  }
}

@media screen and (max-width: 530px) {
    .hide-on-small {
      display: none;
    }
    .resize-on-small img {
      width: 170px;
      height: auto;
    }
    .grid-container-sjh {
        grid-template-columns: 1fr; /* Single column layout */
    }
    .grid-item-sjh img {
        width: 60%; /* Resize image to 80% of its container, adjust as needed */
        margin: 0 auto; /* Center the image */
    }
  }

  @media screen and (max-width: 900px)  {
    .grid-container-sjh {
        grid-template-columns: 1fr; /* Single column layout */
    }
    .grid-item-sjh img {
        width: 80%; /* Resize image to 80% of its container, adjust as needed */
        margin: 0 auto; /* Center the image */
    }
  }