/* КАРТИНКИ СЛЕВА С ОТСТУПОМ, ТЕКСТ СПРАВА */

/* Для всех изображений */
img {
    float: left;
    margin: 0 25px 20px 10px !important; /* ← 10px ОТСТУП СЛЕВА */
    max-width: 500px;
    height: auto;
    display: block;
    border: 1px solid #cccccc !important; /* ← РАМКА СЕРОГО ЦВЕТА */
    box-sizing: border-box;
    clear: both !important; /* ← КАЖДАЯ КАРТИНКА С НОВОЙ СТРОКИ */
}

/* Обеспечиваем, чтобы текст после изображений не обтекал */
h2, p, ul, li, h1 {
    clear: both;
}

/* Контейнер для очистки обтекания */
.content-section {
    overflow: hidden;
    margin: 20px 0;
}

/* Для модальных окон изображения должны быть по центру */
.modal-content img {
    float: none !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    border: none !important; /* ← УБИРАЕМ РАМКУ ДЛЯ МОДАЛЬНЫХ ОКОН */
    clear: none !important; /* ← ОТМЕНЯЕМ CLEAR ДЛЯ МОДАЛЬНЫХ ОКОН */
}

@media (min-width: 768px) {
    img {
        max-width: 550px;
    }
}

@media (max-width: 767px) {
    img {
        float: none;
        margin: 0 0 20px 10px !important; /* ← 10px ОТСТУП СЛЕВА ДЛЯ МОБИЛЬНЫХ */
        display: block;
        max-width: calc(100% - 10px); /* чтобы изображение не выходило за границы с отступом */
        clear: none !important;
    }
}