/* Made by assets-src/families/build_families.py: the pictures, per screen shape (the hero's
   breaks: phone; upright tablet and the laptop column; sideways tablet), and the lamp's shape. */
.families { --lamp-r: 0.59085; --flame-y: 0.537; --chain-r: 0.09288; }
.families { background-image: url(wall.webp); }
.fm-glow { -webkit-mask-image: url(gold.webp); mask-image: url(gold.webp); }
@media (min-aspect-ratio: 5/8) {
  html:root .families { background-image: url(wall-tab.webp); }
  html:root .fm-glow { -webkit-mask-image: url(gold-tab.webp); mask-image: url(gold-tab.webp); }
}
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .families { background-image: url(wall-land.webp); }
  html.is-tablet .fm-glow { -webkit-mask-image: url(gold-land.webp); mask-image: url(gold-land.webp); }
}
.fm-unlit { background-image: url(lamp-unlit.webp); }
.fm-lit { background-image: url(lamp-lit.webp); }
.fm-flicker { -webkit-mask-image: url(lamp-glow.webp); mask-image: url(lamp-glow.webp); }
.fm-gleam { -webkit-mask-image: url(lamp-unlit.webp); mask-image: url(lamp-unlit.webp); }
.fm-chain { background-image: url(chain.webp); }
