/* Customer detail amount hierarchy: effective amount is the primary decision fact. */
.transaction-amounts {
  display: grid;
  gap: 2px;
}

.transaction-amounts > .gross-payment {
  margin: 0;
  color: #d4e5df;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.effective-payment {
  display: block;
  color: #fff;
  font-size: 31px;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

@media (max-width: 760px) {
  .transaction-amounts > .gross-payment {
    font-size: 17px;
  }

  .effective-payment {
    font-size: 24px;
  }
}