/* Find Your Fit: Polara's own fitting assessment, as a code to scan off a screen somebody
   else is holding. The whole block is a link too, so a reader on their own phone can just
   tap it. White tile and a wide quiet zone: scanners want dark-on-light.

   Both published pages use this tile, so it lives here rather than twice: the scroll page
   loads it from ds/, the film page from a/ (staged by tools/make_video_site.py). A page that
   wants a different dim sets --fit-dim; the default is the one the film page uses. */
.fit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pg-space-2);
  text-decoration: none;
}
.fit__label {
  font-size: var(--pg-text-caption);
  text-transform: uppercase;
  color: var(--fit-dim, var(--pg-color-gray-400));
}
/* The DS underlines a:hover, and the tile is an anchor wrapping an image: it brightens
   its label instead. */
.fit:hover { text-decoration: none; }
.fit:hover .fit__label { color: var(--pg-color-white); }
.fit__qr {
  width: 88px;
  height: 88px;
  padding: 6px;
  background: var(--pg-color-white);
}
@media (width <= 767px) {
  .fit__qr { width: 72px; height: 72px; padding: 5px; }
}