Отображение карточек в колонках по двое

Question

Практикуюсь делать сайт. Возникла проблема с 4-мя (ну я еще учитываю что их может быть больше) карточками, при размерах экрана с 1296px по 1106px и с 859px по 641px одна карточка уходит вниз. Выглядит это не очень и мне хотелось бы, чтоб они были в колонках по двое. При остальных размерах всё нормально - они либо четыре в ряд, либо в колонках по двое. При этом желательно (если это возможно) реализовать это с помощью flex-box. Пробовал советы из этих вопросов: Как сделать список опций в две колонки на CSS?, Как сделать 2 колонки на Flexbox, Разделить блоки на две колонки но в моём случае они не работают, всё отображается криво. * Я заранее сделал отступ слева у каждой второй карточки

._container {
    max-width: 1297px;
    padding: 0 15px;
    margin: 0 auto;
}

.page__treatment {
    margin: 20px 0px 0px 0px;
    background: rgba(#D3B288, 0.1);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.treatment__container {
    padding: 120px 1px;
    display: flex;
}

.treatment__header-block {
    max-width: 416px;
    line-height: 140%;
}

.treatment__title {
    margin: 0px 0px 25px 0px;
    max-width: 306px;
}

.treatment__body {
    display: flex;
    flex-wrap: wrap;
}

.treatment__column {
    margin-left: 23px;
    box-sizing: border-box;
    height: 260px;
    width: 196px;
    background-color: #D3B288;
    border-radius: 5px;
    outline: 3px solid white;
    outline-offset: -15px;
}

.treatment__column-title {
    display: flex;
    font-size: 16px;
    line-height: 22.4px;
    color: white;
    justify-content: center;
    margin-top: 198px;
}

@media(max-width: 1296px) {
    .treatment__body {
        justify-content: center;
    }
    .treatment__column:not(:nth-child(2n)) {
        margin-left: 0px;
    }
    .treatment__column {
        margin-bottom: 20px;
    }
}

@media (max-width: 980px) {
    .treatment__container {
        flex-direction: column;
        align-items: center;
    }
    .treatment__body {
        margin-top: 20px;
    }
}

<section class="page__treatment">
  <div class="treatment__container _container">
    <div class="treatment__header-block">
      <h2 class="treatment__title _title">Процедуры лечения волос</h2>
      <div class="treatment__sub-title">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Euismod faucibus arcu fames eu nunc lectus semper convallis. Elementum pretium, risus nec in magna in. Interdum diam sit adipiscing arcu, ut condimentum tincidunt.
      </div>
    </div>
    <div class="treatment__body">
      <div class="treatment__column">
        <div class="treatment__column-title">PRP-ТЕРАПИЯ</div>
      </div>
      <div class="treatment__column">
        <div class="treatment__column-title">МЕЗОТЕРАПИЯ</div>
      </div>
      <div class="treatment__column">
        <div class="treatment__column-title">ОЗОНОТЕРАПИЯ</div>
      </div>
      <div class="treatment__column">
        <div class="treatment__column-title">ФИЗИОТЕРАПИЯ</div>
      </div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Отображение карточек в колонках по двое

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