/* Maintain the original grid column count using the CSS variable */
.views-view-grid.views-view-grid--horizontal {
  display: grid !important;
  grid-template-columns: repeat(var(--views-grid--column-count), 1fr) !important;
  gap: 1rem !important;
}

/* Stack to one column on screens narrower than 900px */
@media screen and (max-width: 900px) {
  .views-view-grid.views-view-grid--horizontal {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure images scale properly */
.views-field-field-media-image-1 img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Optional: Caption and container styling */
.views-view-grid__item {
  display: flex;
  flex-direction: column;
}