:root {
    --gap: 6px; /* space between images */
    --max-width: 1400px; /* container max width */
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap);
    width: 100%;
    /* keep the grid visually compact on small screens by allowing horizontal scroll */
    overflow: auto;
    background: transparent;
    padding: 6px;
    border-radius: 8px;
    margin-top: 250px;
}

/* each cell keeps a square aspect ratio */
.cell {
    width: 100%;
    /* aspect-ratio: 1 / 1; */
    /* ensures square cells */
    overflow: hidden;
    border-radius: 4px;
    background: #ddd;
    display: block;
}

.cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* crop to fill */
    display: block;
}

.image-row {
  display: flex;
  flex-direction: row;
  gap: 10px; /* optional spacing between images */
  margin-top: 250px;
}
.image-row img {
  width: 50%;
  object-fit: cover;
  height: auto;
}
@media (max-width: 768px) {
  .image-row {
    flex-direction: column;
    align-items: center; 
  }
  .image-row img {
    width: 90%;
  }
}