/* The homepage's Recent designs (FREE.md F6): a masonry wall of picked
   customer designs, after reroom's community wall. Each tile is the
   tools grid's compare (home.css .rl-cmp: the before under the design,
   the wipe on hover), except that the design itself sits in the flow and
   gives the tile its height, so every photo keeps its own shape. */
.rl-wall {
  columns: 4 13rem;
  column-gap: 10px;
}

.rl-wall-tile {
  display: block;
  break-inside: avoid;
  margin: 0 0 10px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.rl-wall .rl-cmp {
  display: block;
  aspect-ratio: auto;
}

.rl-wall .rl-cmp .rl-aft {
  position: relative;
  display: block;
  height: auto;
}

.rl-wall-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* On a phone, an even grid of 4:3 tiles, the tools grid's frame: two
   columns of a few picks left the masonry lopsided (Safari stacked three
   tiles left and one right, owner's phone, 2026-10-05). An odd last pick
   is left out so the grid ends on a full row. */
@media (max-width: 40rem) {
  .rl-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    columns: auto;
  }

  .rl-wall-tile { margin: 0; }
  .rl-wall-tile:last-child:nth-child(odd):not(:first-child) { display: none; }

  .rl-wall .rl-cmp { aspect-ratio: 4 / 3; }

  .rl-wall .rl-cmp .rl-aft {
    position: absolute;
    height: 100%;
  }
}