Не получается подогнать верстку под шаблон

Question

Пытаюсь сверстать этот блок

По дизайну изображение занимает примерно 50% экрана. Сохраняя размеры изображения, шрифты и прочее из дизайна сверстал.

В итоге у меня получается какой-то сильно большой отступ между текстовой частью и изображением и я не могу понять почему так вышло. P.S. кнопки и точечки у пунктов не стал пока что верстать, т.к. столкнулся с этой шляпой)

 body{
    font-family: Inter;
    font-style: normal;
    font-weight: normal;
    }
    
    .container {
      max-width: 1057px;
      margin: 0 auto;
    }
    
    .title{
        font-size:32px;
        line-height:48px;
        text-align:center;
        color:#212B31;
    }
    
    .text {
      display: inline-block;
      font-size: 20px;
      line-height: 32px;
      color: #72787D;
    }
    
    .feauters {
      background: url(https://i.stack.imgur.com/ID9Mz.png) no-repeat 100% 143px;
      background-color:#212B31;
      padding-top: 143px;
    }
    .feauters__row {
      display: flex;
    }
    .feauters__item {
      max-width: 557px;
      margin-left: 32px;
    }
    .feauters__item:not(:last-child) {
      margin-bottom: 24px;
    }
    .feauters__title {
      color: #fff;
      text-align: left;
      padding-bottom: 50px;
    }
    .feauters__title-second {
      color: #fff;
      margin-bottom: 10px;
    }
    .feauters__text {
      font-size: 16px;
      line-height: 24px;
      color: rgba(255, 255, 255, 0.75);
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
            rel="stylesheet">
    </head>
    <body>
        
        <div class="feauters">
                <div class="container">
                    <div class="feauters__row">
                        <div class="feauters__descr">
                            <h2 class="title feauters__title">Создан для строительства</h2>
                            <div class="feauters__item">
                                <h3 class="title-second feauters__title-second">Хорошо виден в любых условиях</h3>
                                <span class="text feauters__text">Независимо от того, солнечно или темно, найдется подходящий режим экрана</span>
                            </div>
                            <div class="feauters__item">
                                <h3 class="title-second feauters__title-second">Поддержка международных языков</h3>
                                <span class="text feauters__text">На современной стройке работают люди со всего мира. Язык не является проблемой для СтройКонтроля.</span>
                            </div>
                            <div class="feauters__item">
                                <h3 class="title-second feauters__title-second">Работает на любом устройстве - мобильном телефоне, планшете, ноутбуке</h3>
                                <span class="text feauters__text">Люди на разных должностях используют разные устройства. СтройКонтроль автоматически настраивается в соответствии с требованиями. Вы также можете проецировать панели мониторинга живого проекта на настенные экраны.</span>
                            </div>
                        </div>
                       
                    </div>
                </div>
            </div>
        
        
    </body>
    </html>

Само изображение из макета

БЛОГ НА HUSL

Не получается подогнать верстку под шаблон

Ответы (0 шт):