Horizontal Grid Image Gallery

<div className="images">
        {room.images.map((image, index) => (
          <img key={index} className={`image-${index}`} src={image} />
        ))}
      </div>

<div className="images">
        {room.images.map((image, index) => (
          <img key={index} className={`image-${index}`} src={image} />
        ))}
      </div>

main .images {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fill, min(200px, 15dvw));
  grid-template-rows: repeat(2, min(200px, 15dvw));
  gap: 10px;
  overflow-x: auto;
  width: 100%;
  flex-shrink: 0;
}

main .images img {
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: min(20px, 2dvw);
}

main .images .image-0 {
  grid-column: span 2;
  grid-row: span 2;
}

main .images {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fill, min(200px, 15dvw));
  grid-template-rows: repeat(2, min(200px, 15dvw));
  gap: 10px;
  overflow-x: auto;
  width: 100%;
  flex-shrink: 0;
}

main .images img {
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: min(20px, 2dvw);
}

main .images .image-0 {
  grid-column: span 2;
  grid-row: span 2;
}