.public-phone-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.public-phone-row > input,
.public-phone-row > select {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.public-phone-row input::placeholder {
  color: var(--textMuted);
  opacity: 1;
}
.public-phone-row .phone-code-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .field:has(.public-phone-row),
  .contact-field:has(.public-phone-row) {
    grid-column: 1 / -1;
  }
}