/* GENERATED by build-hero-layers.py - do not hand-edit.
   Every piece layer is a full-size render of the collage box, so its
   placement needs no geometry at all. Only the solid blocks carry
   coordinates, taken straight from the InDesign rects. */

:is(.noselect, .jli-ms) .jlik-cg-block--0 {
  left: 1.564%; top: 33.262%; width: 8.519%; height: 10.936%;
  background: #61B5D0; border-radius: 50%;
  animation-delay: 0.18s;
}
:is(.noselect, .jli-ms) .jlik-cg-block--1 {
  left: 40.213%; top: 75.336%; width: 10.037%; height: 4.635%;
  background: #FFFFFF;
  animation-delay: 0.25s;
}
:is(.noselect, .jli-ms) .jlik-cg-block--2 {
  left: 50.070%; top: 75.336%; width: 10.037%; height: 4.635%;
  background: #D6CAB9;
  animation-delay: 0.32s;
}
:is(.noselect, .jli-ms) .jlik-cg-block--3 {
  left: 68.064%; top: 16.339%; width: 8.519%; height: 10.936%;
  background: #16610C; border-radius: 50%;
  animation-delay: 0.39s;
}
:is(.noselect, .jli-ms) .jlik-cg-block--4 {
  left: 53.438%; top: 40.147%; width: 11.890%; height: 35.495%;
  background: #61B5D0;
  animation-delay: 0.46s;
}
:is(.noselect, .jli-ms) .jlik-cg-block--5 {
  left: 65.327%; top: 40.147%; width: 19.291%; height: 35.495%;
  background: #DF973F;
  animation-delay: 0.53s;
}
:is(.noselect, .jli-ms) .jlik-cg-block--6 {
  left: 20.080%; top: 34.486%; width: 20.995%; height: 15.847%;
  background: #16610C;
  animation-delay: 0.60s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--0 {
  background-image: url("assets/hero/piece-00.webp");
  z-index: 20;
  animation-delay: 0.55s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--1 {
  background-image: url("assets/hero/piece-01.webp");
  z-index: 21;
  animation-delay: 0.60s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--2 {
  background-image: url("assets/hero/piece-02.webp");
  z-index: 22;
  animation-delay: 0.65s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--3 {
  background-image: url("assets/hero/piece-03.webp");
  z-index: 23;
  animation-delay: 0.70s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--4 {
  background-image: url("assets/hero/piece-04.webp");
  z-index: 24;
  animation-delay: 0.75s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--5 {
  background-image: url("assets/hero/piece-05.webp");
  z-index: 25;
  animation-delay: 0.80s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--6 {
  background-image: url("assets/hero/piece-06.webp");
  z-index: 26;
  animation-delay: 0.85s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--7 {
  background-image: url("assets/hero/piece-07.webp");
  z-index: 27;
  animation-delay: 0.90s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--8 {
  background-image: url("assets/hero/piece-08.webp");
  z-index: 28;
  animation-delay: 0.95s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--9 {
  background-image: url("assets/hero/piece-09.webp");
  z-index: 29;
  animation-delay: 1.00s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--10 {
  background-image: url("assets/hero/piece-10.webp");
  z-index: 30;
  animation-delay: 1.05s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--11 {
  background-image: url("assets/hero/piece-11.webp");
  z-index: 31;
  animation-delay: 1.10s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--12 {
  background-image: url("assets/hero/piece-12.webp");
  z-index: 32;
  animation-delay: 1.15s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--13 {
  background-image: url("assets/hero/piece-13.webp");
  z-index: 33;
  animation-delay: 1.20s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--14 {
  background-image: url("assets/hero/piece-14.webp");
  z-index: 34;
  animation-delay: 1.25s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--15 {
  background-image: url("assets/hero/piece-15.webp");
  z-index: 35;
  animation-delay: 1.30s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--16 {
  background-image: url("assets/hero/piece-16.webp");
  z-index: 36;
  animation-delay: 1.35s;
}
:is(.noselect, .jli-ms) .jlik-cg-piece--17 {
  background-image: url("assets/hero/piece-17.webp");
  z-index: 37;
  animation-delay: 1.40s;
}
:is(.noselect, .jli-ms) .jlik-cg-detail {
  background-image: url("assets/hero/detail.webp");
  z-index: 38;
  animation-delay: 1.57s;
}