Необходимо, чтобы секция отображалась следующим образом:
Но с текстом (абзацами p
) стрелки спускаются ниже центра и получается вот так:
Что я упустил/какова моя ошибка? Благодарю заранее.
<section class="process">
<div class="process__heading">
<h1>Как мы работаем</h1>
<img src="./images/red-line.png" alt="red-line">
<p class='warning'>Возможно оформление йога-тура дистанционно из любого города</p>
</div>
<div class="process__steps">
<div class="step-1">
<img src="./images/form.png" alt="form-image">
<p>Вы оставляете заявку</p>
<a class = 'process__link' href="#">Отправить заявку</a>
</div>
<div class="arrow">
<img src="./images/arrow-icon.png" alt="">
</div>
<div class="step-2">
<img src="./images/phone-call.png" alt="phone-image">
<p>Мы связываемся с вами</p>
</div>
<div class="arrow">
<img src="./images/arrow-icon.png" alt="">
</div>
<div class="step-3">
<img src="./images/document.png" alt="document-image">
<p>Подписываем договор и оформляем документы</p>
</div>
<div class="arrow">
<img src="./images/arrow-icon.png" alt="">
</div>
<div class="step-4">
<img src="./images/wallet.png" alt="wallet-image">
<p>Вы оплачиваете аванс 6 000 рублей в банке</p>
</div>
<div class="arrow">
<img src="./images/arrow-icon.png" alt="">
</div>
<div class="step-5">
<img src="./images/ticket.png" alt="ticket-image">
<p>Покупаете билеты и оформляете визу (возможно через нас)</p>
</div>
<div class="arrow">
<img src="./images/arrow-icon.png" alt="">
</div>
<div class="step-6">
<img src="./images/meeting.png" alt="meeting-image">
<p>Вас встречают в аэропорту Тривандрум с табличкой</p>
</div>
</div>
</section>
.process {
height: auto;
padding-bottom: 50px;
}
.process__heading .warning {
font-family: "Muller";
font-weight: normal;
font-size: 1.5rem;
font-style: italic;
padding-top: 50px;
}
.process__steps {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 70px;
text-align: center;
font-family: "Muller";
font-weight: normal;
}
.process__steps p {
margin-top: 20px;
}