.masonry {
  --gap: 20px;
  display: grid;
  gap: var(--gap);
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: var(--gap);
}

.tile {
  aspect-ratio: 1 / 1;
  background: #3b82f6;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: white;
  font: 600 18px/1 system-ui;
}

.tile.span-2 {
  grid-column: span 2;
  grid-row: span 2;
}

.tile.span-2x2 {
  grid-column: span 2;
  grid-row: span 2;
}

.tile.is-hidden {
  /* visibility: hidden;  */
  /* pointer-events: none; */
  background: red;
}

.temporarily-resized-to-1x1 {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
  background: green;
  display: none;
}

.tile.is-hidden.temporarily-resized-to-1x1 {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
  background: yellow;
}