.rendar-lottie {
  --rendar-lottie-min-height: clamp(18rem, 34vw, 28rem);
  position: relative;
  width: 100%;
}

.rendar-lottie__stage {
  width: 100%;
  min-height: var(--rendar-lottie-min-height);
  display: grid;
  place-items: center;
}

.rendar-lottie__stage > svg {
  width: 100% !important;
  height: auto !important;
  max-width: min(100%, 34rem);
  display: block;
}

.rendar-lottie__placeholder {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--rendar-border-strong, rgba(115, 169, 204, 0.36));
  border-radius: var(--rendar-radius-l, 18px);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.rendar-lottie__placeholder span {
  border-radius: 999px;
  background: rgba(10, 31, 53, 0.68);
  color: #eff8ff;
  font-family: var(--rendar-font-family-base, sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.6rem 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}



.rendar-lottie__stage:has(svg) + .rendar-lottie__placeholder {
  display: none;
}