/*
  Mosaic (.mosaic; Figma Work page 158:1130): a collage of work on a 272px grid. Cells start at the 40px margin;
  a tile may also run into either margin to the page edge. Tiles touch, with no gaps or rules between them.

  Columns: 1 = left margin (0–40), 2–6 = the five 272px cells (40, 312, 584, 856, 1128), 7 = right margin (1400–1440).
  Rows are 272px. Each tile is placed with --at, a grid-area: "row / column / row-end / column-end".

  Markup:
    <ul class="mosaic rule-t rule-b" aria-label="…">
      <li class="mosaic__tile" style="--at:2 / 2"><img src alt></li>                     one cell
      <li class="mosaic__tile mosaic__tile--wide" style="--at:3 / 1 / 4 / 4"><img src alt></li>   margin + two cells
      <li class="mosaic__tile brand-tile" style="--at:1 / 5"><img src="/home-assets/ekko-mark.svg" alt="EKKO"></li>    (.brand-tile, site.css)
    </ul>
  --wide marks a tile two cells wide (it keeps that on phones, where the mosaic becomes a three-up grid). The red EKKO
  tile is the shared .brand-tile (site.css).
  Images are exported at 2× the tile size, already cropped.
*/
.mosaic{display:grid;grid-template-columns:4rem repeat(5,27.2rem) 4rem;grid-auto-rows:27.2rem}
.mosaic__tile{grid-area:var(--at);position:relative;overflow:hidden}
.mosaic__tile:not(.brand-tile) img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.mosaic__tile:not(.brand-tile):hover img{transform:scale(1.04)}   /* the brand tile's mark is sized by .brand-tile */

@media (max-width:767px){
  .mosaic{grid-template-columns:repeat(3,1fr);grid-auto-rows:calc(100vw / 3);grid-auto-flow:dense}
  .mosaic__tile{grid-area:auto}
  .mosaic__tile--wide{grid-column:span 2}
}