/*
 * QR modules must remain square after responsive layout resizing.  Browser
 * smoothing creates grey edges which make a desktop display much harder for a
 * provisioning camera to read.
 */
.qr > img {
  display: block;
  height: auto;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.reclaim-qr > img {
  margin: 0 auto;
}

@media (min-width: 801px) {
  .reclaim-qr > img {
    width: min(100%, 280px);
    padding: 0;
  }
}

@media (max-width: 800px), (hover: none) and (pointer: coarse) {
  .reclaim-qr {
    display: flex;
    justify-content: center;
  }

  .reclaim-qr > img {
    flex: 0 0 auto;
    width: calc(100vw - 38px);
    max-width: calc(100vw - 30px);
  }
}