/* Proof cards: keep long values from colliding at any viewport width. */
.proof-before-after {
  margin: 20px 0 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 24px auto auto;
  align-items: center;
  justify-items: start;
  gap: 2px;
  max-width: none;
}

.proof-before-after small,
.proof-before-after small:nth-of-type(2),
.proof-before-after b,
.proof-before-after i,
.proof-before-after em {
  grid-column: 1;
}

.proof-before-after small:first-child {
  grid-row: 1;
}

.proof-before-after b {
  grid-row: 2;
  font-size: var(--fs-sub);
  white-space: normal;
}

.proof-before-after i {
  grid-row: 3;
  align-self: center;
  justify-self: start;
  width: 24px;
  transform: rotate(90deg);
  transform-origin: center;
  font-size: var(--fs-body);
  line-height: 1;
}

.proof-before-after small:nth-of-type(2) {
  grid-row: 4;
}

.proof-before-after em {
  grid-row: 5;
  font-size: var(--fs-sub);
  white-space: normal;
}

@media (max-width: 520px) {
  .proof-before-after b {
    font-size: var(--fs-heading);
  }

  .proof-before-after em {
    font-size: var(--fs-sub);
  }
}