.adiv_JSON {
    width: 75%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
}

.showtimes-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.event-cell {
    width: 25%;
    padding: 1%;
    text-align: center;
    vertical-align: top;
}

.image-container {
  width: 100%;
  height: 0;
  padding-top: 150%; /* aspect ratio */
  position: relative;
  overflow: hidden;
  border: 2px solid #2a2a2a;
  background-color: black; /* will show behind smaller images */
}

.event-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* maintain image inside container */
  display: block;
  background: black;
}


.event-title {
    margin-top: 10px;
    font-size: 1.5vw;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    height: 1.2em;
}

.event-date {
    margin-top: 5px;
    font-size: 1.2vw;
    color: #cccccc;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .adiv_JSON { width: 90%; }
    .event-title { font-size: 2vw; }
    .event-date { font-size: 1.8vw; }
}

@media (max-width: 768px) {
    .adiv_JSON { width: 100%; padding: 0 10px; }
    .event-cell { width: 50%; } /* 2 columns on smaller screens */
    .event-title { font-size: 2.5vw; }
    .event-date { font-size: 2.2vw; }
}

@media (max-width: 480px) {
    .event-cell { width: 100%; } /* 1 column on mobile */
    .event-title { font-size: 3vw; }
    .event-date { font-size: 2.5vw; }
}