.grid {
  background: #fff;

}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 33.333%; /* One column */
}



.grid-item--span-2 {
  width: 66.666%; /* Two columns */
}

.grid-item {
  float: left;
  position: relative;
}

/* Two-row height */
.grid-item--height2 {
  height: calc(2 * var(--row-height) + var(--gap)); /* Spans 2 rows */
}

.grid-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Variables for flexibility */
:root {
  --row-height: 134px; /* Adjust row height */
  --gap: 1px; /* Adjust grid gap */
}

@media (max-width: 768px) {
  :root {
    --row-height: 100px; /* Smaller row height for small screens */
    --gap: 5px;
  }
}