/* Page background */
body {
  background-color: #f5f5f5;
  margin: 0;
}

/* Center the whole schedule block on the page */
.calendar-listing-container {
  max-width: 1400px;   /* controls overall width so it doesn't go 5-across */
  margin: 0 auto;      /* centers */
  padding: 0 24px;     /* side padding for smaller screens */
}

/* Grid wrapper */
.calendar-listing_grid-view {
  display: grid;
  gap: 24px;

  /* 4 across by default (desktop) */
  grid-template-columns: repeat(4, 1fr);
}

/* 3 across (laptop / smaller desktop) */
@media (max-width: 1200px) {
  .calendar-listing_grid-view {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 across (tablet) */
@media (max-width: 850px) {
  .calendar-listing_grid-view {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 across (mobile) */
@media (max-width: 520px) {
  .calendar-listing_grid-view {
    grid-template-columns: 1fr;
  }
}

/* Make the <a> fill the grid cell */
.calendar-listing_grid-view a {
  display: block;
}

/* IMPORTANT: do NOT crop images */
.calendar-listing_grid-view img {
  width: 100%;
  height: auto;        /* <— key: no forced height */
  display: block;

  /* optional: keeps image from overflowing if something weird happens */
  max-width: 100%;
}