.range {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.range .input::placeholder {
  text-transform: lowercase;
  color: var(--extra-white-opacity-03);
}


.range .input {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 40%;
  text-transform: lowercase;
  padding: 0;
}


@media (max-width: 1240px) {
  .range {
    gap: var(--space-4);
  }
}

@media (max-width: 1023px) {
  .range .input,
  .range .input::placeholder,
  .range .range-text {
    font-size: var(--space-18) !important;
  }
}
@media (max-width: 680px) {
    .range .input,
    .range .input::placeholder,
    .range .range-text {
      font-size: var(--space-16) !important;
    }
  }