.ayah-heading {
  border-left: 2px solid var(--terracotta);
  padding: 0 0 13px 14px;
  margin-bottom: 14px;
}
.ayah-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--terracotta);
  font-weight: 700;
  margin: 0 0 7px;
}
.ayah-english {
  font: 500 16px/1.35 var(--serif);
  letter-spacing: -.015em;
  margin: 0;
}
.ayah-arabic {
  font: 500 20px/1.8 Georgia, serif;
  color: var(--ink);
  margin: 0 0 6px;
}
.ayah-english span, .ayah-urdu span {
  font: 11px var(--sans);
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
}
.ayah-urdu {
  font: 400 16px/1.7 var(--urdu);
  margin: 4px 0 0;
  color: #604639;
}
.ayah-urdu span { font-family: var(--urdu); font-size: 12px; }
.image-heading {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 18px;
  max-width: calc(100% - 76px);
  padding: 9px 14px;
  border-radius: 2px;
  color: #fffaf3;
  background: rgba(48, 36, 30, .78);
  box-shadow: 0 3px 12px rgba(48, 36, 30, .22);
  font: 500 clamp(17px, 2vw, 26px)/1.1 var(--serif);
  letter-spacing: -.02em;
}
.image-heading-urdu {
  right: 18px;
  left: auto;
  font-family: var(--urdu);
  font-size: clamp(19px, 2.3vw, 31px);
  line-height: 1.45;
  padding-top: 6px;
}
@media (max-width: 760px) { .ayah-heading { padding-bottom: 11px; } }