Адаптация скриншотов под моб устройства

Здравствуйте. Помогите оптимизировать скриншоты под мобильные устройства. С ноутбука все смотрится норм, а вот с гаджетов.. Нужно, чтобы при просмотре с моб устройств скрины смотрелись в 2 столбца по 2 фото. Ниже прикреплю 3 фото (1 - как на ноубуке смотрится, 2 - как на телефоне, 3 - как должно смотрется)

В fullstory у меня (вывод через доп поля загрузка изображений)

<div class="screens-section fx-row clearfix">[xfvalue_two] [xfvalue_three] [xfvalue_four][xfvalue_five]</div>

В CSS

.screens-section {text-align:center;}
.screens-section>.scr-img,.screens-section>img {width:auto;height:auto;margin:2px 0px;border: 1px solid #27323b;border-radius: 6px;justify-content: center;}
.screens-section>.scr-img,.screens-section>img {display:inline-block;width:24.5%;height:115px;overflow:hidden}.screens-section>.scr-img+br{display:none}.screens-section>.scr-img img{display:block;width:100%;min-height:100%}.screens-section>.scr-img img:hover{box-sizing:border-box;border:2px solid #ca563f}

В CSS Adaptive в @media screen and (max-width: 590px) и других

.screens-section {width: 50%;}

Никак не получается зделать нормально. Помогите. Зарание спасибо.