Есть шаги, 1-5. Как при адаптивной верстке перенести 4 и 5 шаг на уровень ниже?

У Вас display: grid стоит, поэтому не получится так сделать. Уберите свойства грида и замените на display: flex; и justify-content: center; для .container-navigation__step. Чтоб перенести, просто поставьте max-width сколько нужно

Прошу,

    <div class="steps">
        <h2 class="steps-header">КАК ЗАБРАТЬ ПИТОМЦА ДОМОЙ?</h2>
        <div class="container-navigation__step">
            <div class="smallc-naxigation__step"> <!-- Добавляем по диву -->
                <div class="navigation__step">
                    <h3 class="step-number">1</h3>
                    <h4 class="what-to-do__step">Выберите питомца</h4>
                    <p class="text-step">В нашем приюте содержится более 60 собак</p>
                </div>
                <div class="navigation__step">
                    <h3 class="step-number">2</h3>
                    <h4 class="what-to-do__step">Оставьте
                        заявку</h4>
                    <p class="text-step">Через сайт или связавшись с нами любым удобным для вас способом</p>
                </div>
                <div class="navigation__step">
                    <h3 class="step-number">3</h3>
                    <h4 class="what-to-do__step">Пройдите
                        собеседование</h4>
                    <p class="text-step">Мы заботимся о наших питомцах и отдаем их только в хорошие руки</p>
                </div>
            </div>
            <div class="smallc-naxigation__step"> <!-- Добавляем по диву -->
                <div class="navigation__step">
                    <h3 class="step-number">4</h3>
                    <h4 class="what-to-do__step">Познакомьтесь
                        с собакой</h4>
                    <p class="text-step">Приезжайте к нам в приют, что бы в живую увидеть вашего питомца</p>
                </div>
                <div class="navigation__step">
                    <h3 class="step-number">5</h3>
                    <h4 class="what-to-do__step">Забирайте
                        друга домой</h4>
                    <p class="text-step">Мы поможем вам с транспортировкой</p>
                </div>
            </div>
        </div>
        <button class="button-step step-take">
            <p class="text-button__step">ВЗЯТЬ ПИТОМЦА</p>
        </button>
    </div>

CSS:

.steps {
    width: 1180px;
    height: 1000px;
    padding-top: 110px;
    text-align: center;
    margin: auto;
}

.steps .steps-header {
    font-weight: 500;
    font-size: 50px;
    line-height: 60px;
    padding-bottom: 67px;
    text-align: center;
    font-family: 'Rubik';
    font-style: normal;
    color: #444444;
}

.steps .container-navigation__step {} /*тут ничего не пишем*/

.steps .smallc-naxigation__step { /*выравниваем добавленные блоки по центру и ставим gap 50px, gap - отступ между элементами*/
    display: flex;
    justify-content: center;
    gap: 30px;
}

.steps .navigation__step {
    width: 300px; /*Задаём ширину для каждого блока, можете поменять*/
}

.steps .container-navigation__step .step-number {
    font-weight: 500;
    font-size: 50px;
    line-height: 40px;
    color: #E73D66;
    padding-inline: 0;
    font-family: 'Rubik';
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 60px;
    align-items: center;
}

.steps .container-navigation__step .step-number::before,
.steps .container-navigation__step .step-number::after {
    content: "";
    border-bottom: 1px solid;
}

.steps .container-navigation__step .navigation__step:first-child .step-number::before,
.steps .container-navigation__step .navigation__step:last-child .step-number::after {
    visibility: hidden;
}

.steps .container-navigation__step .what-to-do__step {
    padding-top: 27px;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    font-family: 'Rubik';
    font-style: normal;
    text-align: center;
    color: #444444;
}

.steps .container-navigation__step .text-step {
    padding-top: 10px;
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
    font-family: 'Rubik';
    font-style: normal;
    text-align: center;
    color: #444444;
}

Это можно также с помощью grid сделать, а в первом ответа я глупо написал, ведь нельзя flex разделить, также как и грид. Остальное не трогал, если надо, пишите. Удачи!

для наглядности оставил только самые основные правила и скелет

// ну как оставил... написал с нуля =) будьте внимательны с именами при копировании.

h3{color: #E73D66;}
hr, h3{color: #E73D66; }
#x{
    display:grid;
    margin: 5px;
    padding: 2px;
    border:  1px #000 solid;
    text-align: center
}
@media (min-width: 768px) {
    #x{grid-template-columns: repeat(9, 1fr); }
  /* все элементы пихаем в одну строку на дэсктопе */
}
@media (max-width: 768px) {
    #x{grid-template-columns: repeat(5, 1fr); }
  #desctop{display:none}
  /* прячем <hr/> стоящий между 3 и 4 на мобильных экранах */
}

<div id='x'>
    <h3>1</h3>
        <h3><hr/></h3>
    <h3>2</h3>
        <h3><hr/></h3>
    <h3>3</h3>
        <h3><hr id='desctop'/></h3>
    <h3>4</h3>
        <h3><hr/></h3>
    <h3>5</h3>
</div>

p.s. конечно есть и более точные альтернативы, можно например прибить каждый элемент к своему месту такими вот "гвоздями":

grid-row-start: 1;
grid-row-end: 14;
grid-column-start: 7;
grid-column-end: 10;

или такими:

grid-column: 2;
grid-row: 2;