/* ==========================================================================
   QR door pages
   ========================================================================== */

.qr-door {
  --gap: var(--s-32);
}

.qr-door > .grid {
  --col-gap: var(--s-48);
  --row-gap: var(--s-32);
  align-items: center;
}

.qr-door .image {
  display: flex;
  justify-content: center;
  width: 100%;
}

.qr-door .image img {
  display: block;
  width: min(100%, 18rem);
  height: auto;
  border-radius: var(--border-radius-media);
}

.qr-door .summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.qr-door .summary p {
  margin: 0;
  font-size: var(--font-size-lg);
}

.qr-door dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-8) var(--s-16);
  margin: var(--s-16) 0 0;
  width: 100%;
  text-align: left;
}

.qr-door dt {
  font-weight: 500;
}

.qr-door dd {
  margin: 0;
}

@media (min-width: 40rem) {
  .qr-door .image {
    justify-content: flex-end;
  }

  .qr-door .image img {
    width: min(100%, 21rem);
  }
}