.hero-phone {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 22px;
  width: min(100%, 430px);
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid #c7cabf;
  background: #eceee7;
  transition: border-color .2s, background .2s;
}
.hero-phone:hover { border-color: var(--accent); background: #e4e7de; }
.hero-phone span {
  grid-column: 1;
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-phone strong {
  grid-column: 1;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.35px;
}
.hero-phone i {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: 22px;
  color: var(--accent);
  font-style: normal;
}
.hero-phone + .hero-note { margin-top: 30px; }
@media (max-width: 420px) {
  .hero-phone { padding: 14px 15px; }
  .hero-phone strong { font-size: 20px; }
}