Как убрать широкий отступ между колонками из картинок?

Question

[tanuxa2022]

<div class="footer__cards">
            <div class="footer__card">
                <img class="cards__img" src="img/card2.png" alt="Black sea wine route">
                <div class="cards__context">
                    <h2 class="cards__title">Armenia</h2>
                    <a href="#" class="cards__link">
                        <img src="img/arrow-up.png" alt="Arrow Up">
                    </a>
                </div>
            </div>
            <div class="footer__card">
                <img class="cards__img" src="img/card3.png" alt="Black sea wine route">
                <div class="cards__context">
                    <div class="cards__title">
                        <h2 class="cards__title-h2">Georgia</h2>
                    </div>
                    <a href="#" class="cards__link">
                        <img src="img/arrow-up.png" alt="Arrow Up">
                    </a>
                </div>
            </div>
            <div class="footer__card">
                <img class="cards__img" src="img/card4.png" alt="Black sea wine route">
                <div class="cards__context">
                    <div class="cards__title">
                        <h2 class="cards__title-h2">Ukraine</h2>
                    </div>
                    <a href="#" class="cards__link">
                        <img src="img/arrow-up.png" alt="Arrow Up">
                    </a>
                </div>
            </div>
            <div class="footer__card">
                <img class="cards__img" src="img/card5.png" alt="Black sea wine route">
                <div class="cards__context">
                    <div class="cards__title">
                        <h2 class="cards__title-h2">Greece</h2>
                    </div>
                    <a href="#" class="cards__link">
                        <img src="img/arrow-up.png" alt="Arrow Up">
                    </a>
                </div>
            </div>
        </div>

Есть следующий код HTML
Ну и соответственно CSS

.footer__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer__card {
  position: relative;
  max-width: 606px;
  margin-bottom: 25px;
}

.cards__img {
  border-radius: 30px;
  width: 100%;
}

Получается огромный разрыв между колонками из картинок, хотя margin должен быть всего 25. В чем проблема? Мне кажется в space-between, но как убрать

Comments

[Ankhena]

Мне кажется в space-between, но как убрать

Да, в нём.
В каком смысле "но как убрать"? Прям так, взять и стереть.
Может быть, для вашей истинной цели поможет flex-grow?
Или гриды с их auto-fiil (auto-fit) и minmax?

Answer 1

[Prog-Time]

Удали justify-content: space-between и укажи column-gap: 25px;