Как разместить четыре картинки "квадратом" внутри секции?

Есть такая секция в учебном макете:

А в ней блок с галереей:

Как его можно сверстать? У меня все ссылки, в которых картинки, идут друг за другом вертикально. Я знаю про существование различных библиотек и плагинов с готовой версткой и скриптами, но этот блок хочу сверстать сам. Скрипт модальных окон я уже написал, остались только стили и разметка. Моя верстка внутри секции такая:

    <section class="page-section hotel">
                <h3 class="page-section__title hotel__title">
                            Hotel
                            <span>Sultan Cave Suites</span>
            </h3>   
            <div class="page-section__inner">
                <img class="hotel__img" src="img/hotel/big.jpg" alt="">
                <div class="page-section__contant">
                    <div class="page-section__container">
                        <div class="page-section__body hotel__body">
                            <p class="page-section__text hotel__text">
                            В этом уникальном отеле, расположенном на вершине холма Айдынлы,
                            вы можете забронировать высеченные в скале номера, обставленные антикварной мебелью со всей Турции. 
                            С солнечной террасы отеля открывается прекрасный панорамный вид на Национальный парк Гереме.
                            </p>
                            <p class="page-section__text hotel__text">
                            Большинство номеров отеля Sultan Cave Suites высечены в скале, что обеспечивает прохладу и покой. 
                            Все номера оборудованы гостиной зоной и современной ванной комнатой.
                            В большинстве из них есть собственная терраса или балкон.
                            </p>
                            <p class="page-section__text hotel__text">
                            Отель Cave Suites Sultan располагает изысканным рестораном, где подают фирменные блюда региона Каппадокии.
                            После ужина, пройдя на террасу, вы сможете заказать напиток и полюбоваться закатом солнца над деревней.
                            </p>
                            <div class="hotel__gallery">
                                <div class="rallery__row">
                                <a href="#pop1" class="popup-link"><img class="hotel__img hotel__img-small hotel__img-01" src="img/hotel/01.jpg" alt=""></a>
                                <a href="" class="gallery__link"><img class="hotel__img hotel__img-small hotel__img-02" src="img/hotel/02.jpg" alt=""></a>
                                </div>
                                <div class="rallery__row">
                                <a href="" class="gallery__link"><img class="hotel__img hotel__img-small hotel__img-03" src="img/hotel/03.jpg" alt=""></a>
                                <a href="" class="gallery__link popup__link"><img class="hotel__img hotel__img-small hotel__img-04" src="img/hotel/04.jpg" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    </section>

scss:

.page-section {
    width : 100%;
    height: 100%;
    margin: 200px auto;
}
.page-section__title {
    font-size: 96px;
    line-height: 128px;
    color: #E2AB3F;
    font-family: "Balqis";
    font-weight: 300;
    margin-bottom: 100px; 
    span{
        line-height: 28px;
        font-size: 24px;
        font-family: "Roboto";
        font-style: italic;
        color: #000;
        display: block;
        margin-top: -30px;
    }
}
.page-section__inner {
position: relative;
display: flex;
justify-content: space-around;
}
.page-section__contant {
    display: flex;
    flex: 1 1 auto;
    position: relative;
}
.page-section__container {
    position: absolute;
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1230px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.page-section__body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    max-width: 50%;
    height: 100%;
}
page-section__text {
    padding: 10px 0;
}
.page-section__boby-title {
    font-family: "Roboto";
    font-weight: 400;
}
.hotel__title {
    span{ 
        margin-left: 120px;
    }
}
.hotel__img {
    margin-right: 100px;
}
.hotel__galery{
    width: 100%;
    margin-top: 80px;
    padding: 50px 40px;
}
.hotel__text {
    margin-bottom: 20px; 
}

Вот что у меня получилось:

Думаю на скрине видно, что картинки располагаются вертикально. Хотя если их вынести за блок с классом page-section__body вот так:

'''

<section class="page-section hotel">
            <h3 class="page-section__title hotel__title">
                        Hotel
                        <span>Sultan Cave Suites</span>
        </h3>   
        <div class="page-section__inner">
            <img class="hotel__img" src="img/hotel/big.jpg" alt="">
            <div class="page-section__contant">
                <div class="page-section__container">
                    <div class="page-section__body hotel__body">
                        <p class="page-section__text hotel__text">
                        В этом уникальном отеле, расположенном на вершине холма Айдынлы,
                        вы можете забронировать высеченные в скале номера, обставленные антикварной мебелью со всей Турции. 
                        С солнечной террасы отеля открывается прекрасный панорамный вид на Национальный парк Гереме.
                        </p>
                        <p class="page-section__text hotel__text">
                        Большинство номеров отеля Sultan Cave Suites высечены в скале, что обеспечивает прохладу и покой. 
                        Все номера оборудованы гостиной зоной и современной ванной комнатой.
                        В большинстве из них есть собственная терраса или балкон.
                        </p>
                        <p class="page-section__text hotel__text">
                        Отель Cave Suites Sultan располагает изысканным рестораном, где подают фирменные блюда региона Каппадокии.
                        После ужина, пройдя на террасу, вы сможете заказать напиток и полюбоваться закатом солнца над деревней.
                        </p>
                    </div>
                    <div class="hotel__gallery">
                            <div class="rallery__row">
                            <a href="#pop1" class="popup-link"><img class="hotel__img hotel__img-small hotel__img-01" src="img/hotel/01.jpg" alt=""></a>
                            <a href="" class="gallery__link"><img class="hotel__img hotel__img-small hotel__img-02" src="img/hotel/02.jpg" alt=""></a>
                            </div>
                            <div class="rallery__row">
                            <a href="" class="gallery__link"><img class="hotel__img hotel__img-small hotel__img-03" src="img/hotel/03.jpg" alt=""></a>
                            <a href="" class="gallery__link popup__link"><img class="hotel__img hotel__img-small hotel__img-04" src="img/hotel/04.jpg" alt=""></a>
                            </div>
                        </div>
                </div>
            </div>
</section>

То картинки разместятся так:

Что тоже не правильно, но уже что-то. Помогите сверстать блок с галереей, пожалуйста. Уже полчаса пытаюсь разместить его по макету.