Адаптация текста для блока формы

Пожалуйста помогите адаптировать текст для формы чтобы он не выезжал за пределы блока

пытался с помощью gpt-шки сделать в итоге с clamp ничего не получилось, посмотрите пожалуйста кто хорошо разбирается как правильно адаптировать блок

также, кто крут в дизайне помогите с дизайном формы, не знаю как сделать красиво

CSS

@media all {
  .contact-body {
    background-color: #000;
    color: #ffffff;
    padding: 4% 0;
    font-family: 'Rubik', sans-serif;
  }
  .contact-header{
    padding: 0 14%;
  }

  .contact-header h2 {
    color: #ffffff;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: bold;
    margin-bottom: 0.6em;
  }

  .contact-header p {
    margin-bottom: 1em;
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    color: #bce3b3;
  }

  .phones {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: bold;
    margin-bottom: 1em;
  }

  .phone {
    color: #f08090;
  }


  .map-wrapper {
    position: relative;
  }
  
  .map {
    height: calc(35vw + 4em);
    width: 100%;
  }
  
  .form {
    position: absolute;
    top: 0;
    right: 7%;
    z-index: 2;
    width: 30vw;
    height: calc(32vw + 4em);
    background-color: #111;
    margin: 1.5vw;
    padding: 2em;
    border-radius: 2em;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
  }
  

  .form * {
    width: 100%;
  }

  .form button {
    background-color: #f08090;
    color: #000;
    border: none;
    padding: 0.9em 1.4em;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 0.5em;
    margin-bottom: .8em;
    cursor: pointer;
    transition: background 0.3s ease;
  }


  .form small {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: #bce3b3;
    text-align: center;
  }
  .form h3 {
    font-size: clamp(2rem, .1vw, 3rem);
    margin-bottom: 0.6em;
    text-align: center;
  }
  
  .form-desc {
    font-size: clamp(.8rem, 1.4vw, 1.25rem);
    margin-bottom: .8em;
    line-height: 1.5em;
    color: #bce3b3;
  }
  
  .form input {
    padding: 0.5em 0;
    margin-bottom: 0.6em;
    border: none;
    border-bottom: 2px solid #bce3b3;
    background: transparent;
    color: #fff;
    outline: none;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
  }
  .form input::placeholder {
    color: #bce3b3;
  }
  
  .form button {
    background-color: #f08090;
    color: #000;
    border: none;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 0.5em;
    margin-bottom: .8em;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  .form button:hover {
    background-color: #ffa3ad;
  }
  
  .form small {
    font-size: clamp(.8rem, 1.2vw, 1.2rem);
    color: #bce3b3;
    text-align: center;
  }
  
  .form small a {
    color: #f08090;
    text-decoration: underline;
  }
  .form h3,
  .form-desc,
  .form small {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
  }
  
}

@media (max-width: 1024px) {
  .contact-block {
    padding: 6% 8%;
  }

  .contact-body {
    flex-direction: column;
    text-align: center;
    gap: 3em; 
  }

  .map,
  .form {
    width: 100%;
    min-height: 320px;
  }

  .form {
    position: static;
    width: 100%;
    height: auto;
    padding: 2.4em 7%;
    margin: 7% 0 0 0;
    border-radius: 0;
  }
  .phones {
    justify-content: center;
    gap: 1.5em;
  }

  .contact-header h2 {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .contact-block {
    padding: 9% 7%;
  }

  .contact-header p {
    text-align: center;
  }

  .form {
    height: auto;
    padding: 2.4em 7%;
    margin: 7% 0 0 0;
  }

  .form button {
    padding: 0.6em 1em;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }

  .form h3 {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
  }

  .form input {
    font-size: clamp(0.95rem, 2.8vw, 1.2rem);
    text-align: center;
  }

  .form-desc {
    font-size: clamp(1rem, 3vw, 1.3rem);
  }
}

@media (max-width: 400px) {
  .form h3 {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .form {
    height: auto;
    padding: 2.4em 7%;
    margin: 7% 0 0 0;
  }

  .form input,
  .form button {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }
}

PHP

<div class="contact-body">
<div class="contact-header">
            <h2>ОТДЕЛ ПРОДАЖ</h2>
            <p>Челябинск, улица Гагарина 7</p>
            <div class="phones">
                <span class="phone">+7 (351) 246-81-32</span>
                <span class="phone">+7 (351) 721-09-45</span>
            </div>
        </div>
    <div class="map-wrapper">
        <div id="map" class="map"></div>
        <script src="https://api-maps.yandex.ru/2.1/?apikey=77c71b06-c79f-40e8-817f-297d420d91ee&lang=ru_RU" type="text/javascript"></script>
        <script src="/scripts/map.js"></script>
        <div class="form">
            <h3>Запишитесь на просмотр</h3>
            <p class="form-desc">Укажите свои контакты, и с вами свяжется менеджер, чтобы назначить время просмотра</p>
            <form method="post" action="">
                <input type="text" name="name" placeholder="Ваше Имя?" required />
                <input type="tel" name="phone" placeholder="Ваш номер телефона" required />
                <button type="submit">Записаться на просмотр</button>
            </form>
            <small>Оставляя заявку, даю согласие на
                <a href="#">обработку персональных данных</a>
            </small>
        </div>
    </div>
</div>

JS

function init() {
    const map = new ymaps.Map("map", {
        center: [55.142952, 61.444586],
        zoom: 15,
        controls: ['zoomControl']
    });

    const points = [
        { coords: [55.142952, 61.444586], text: "Главный офис" },
        { coords: [55.166495, 61.441603], text: "Отдел продаж" },
        { coords: [55.127224, 61.260548], text: "ЖК«Грин»" }
    ];

    const bounds = new GeoBounds();

    points.forEach(point => {
        const placemark = new ymaps.Placemark(point.coords, {
            balloonContent: point.text
        }, {
            iconLayout: 'default#image',
            iconImageHref: '/icons/logo-Circle.svg', // путь к кастомной иконке
            iconImageSize: [40, 40],
            iconImageOffset: [-15, -15] // смещение — подгоняется под размер
        });

        map.geoObjects.add(placemark);
        bounds.extend(point.coords);
    });

    const calculatedBounds = bounds.getBounds();
    if (calculatedBounds) {
        map.setBounds(calculatedBounds, {
            checkZoomRange: true,
            zoomMargin: 20
        });
    }
}

class GeoBounds {
    constructor() {
        this._bounds = [];
    }

    extend(coords) {
        this._bounds.push(coords);
    }

    getBounds() {
        if (this._bounds.length === 0) return null;
        let lats = this._bounds.map(p => p[0]);
        let lngs = this._bounds.map(p => p[1]);
        return [
            [Math.min(...lats), Math.min(...lngs)],
            [Math.max(...lats), Math.max(...lngs)]
        ];
    }
}

Проблема по сути не только в том что текст вылазит из блока, а также в том, что при большом размере текст занимает чуть больше половины блока, что выглядит не очень