.card-name-mark {
  position: relative;
  z-index: 1;
  color: var(--card-ink, #c1d7a3);
  font: 700 clamp(44px, 9vw, 72px)/1 Inter, Arial, sans-serif;
  font-size: clamp(13px, calc(100cqw / (var(--domain-name-length, 8) * .65)), 72px);
  letter-spacing: clamp(-3px, -.045em, -.7px);
  text-shadow: 0 12px 25px #0007;
  white-space: nowrap;
}

.card-visual {
  container-type: inline-size;
}

.card-bottom .card-view {
  width: auto;
  min-width: 102px;
  height: 43px;
  padding: 0 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 10px/1 Arial, Helvetica, sans-serif;
  white-space: nowrap;
}

.card-view span {
  font-size: 17px;
  line-height: 1;
}

@media (max-width: 600px) {
  .card-name-mark {
    font-size: clamp(40px, 14vw, 60px);
    letter-spacing: -2px;
  }
}