@font-face {
  font-family: "Torpedo";
  src:
    url("../assets/font/Torpedo.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.project-hero.type-tester {
  background: #ffffff;
}

.type-tester__inner {
  width: 100%;
  height: 100%;
  padding: 60px;
  box-sizing: border-box;
  overflow-y: auto;
  font-family: "Torpedo", sans-serif;
  color: #e91d1b;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.15;
  outline: none;
  cursor: text;
}

.type-tester__inner:empty::before {
  content: attr(data-placeholder);
  color: rgba(233, 29, 27, 0.35);
  pointer-events: none;
}

.type-tester__prompt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  padding: 0 5px;
  margin-bottom: 8px;
}

@media (max-width: 860px) {
  .type-tester__inner {
    padding: 32px;
    font-size: clamp(1.6rem, 8vw, 3rem);
  }

  .type-tester__inner img {
    scale: calc(10%);
    }
}