Сделать картинки по горизонтали. - Joomla 3.x: Общие вопросы

Я пытался сделать сам через правки в CSS файле но все равно получается криво.

<div id="obshee" style="display: grid;grid-template-columns: repeat(3, 1fr);">
    <div id="sozd">
        <img src="/images/list1.jpg" border="0" width="40" height="114">  
        <p>Самый выгодный паушальный взнос среди конкурентов!</p>  
    </div>
    <div id="podd">
        <img src="/images/list2.jpg" border="0" width="40" height="114">
        <p><b>Роялти:</b> 5% от оборота при не выполнении плана продаж в 400 000 тенге (~900$ или 70 000 руб) в месяц. <span style="color: #3366ff;"><em>(Скидка! Первые 4 месяца без роялти)</em></span></p>
    </div>
    <div id="perevodozvuchka">
        <img src="/images/list3.jpg" border="0" width="40" height="114">
        <p>
            <b>Стартовые инвестиции: от 970 000 тенге (~2 200$ или 160 000 руб) </b><em style="color: #3366ff;">*Стартовые инвестиции могут быть намного меньше в случае, если данная фарншиза будет в виде дополнительного бизнеса.</em>
        </p>
    </div>
</div>

#obshee > div {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: large;
    font-weight: 600;
}

Структура оставляет желать лучшего!
Но Вам поможет сетка grid что бы сделать три столбца и каждый элемент flex для того что бы выровнять по вертикали...

Код: html

<div id="obshee" style="display: grid;grid-template-columns: repeat(3, 1fr);">
    <div id="sozd">
        <img src="/images/list1.jpg" border="0" width="40" height="114">  
        <p>Самый выгодный паушальный взнос среди конкурентов!</p>  
    </div>
    <div id="podd">
        <img src="/images/list2.jpg" border="0" width="40" height="114">
        <p><b>Роялти:</b> 5% от оборота при не выполнении плана продаж в 400 000 тенге (~900$ или 70 000 руб) в месяц. <span style="color: #3366ff;"><em>(Скидка! Первые 4 месяца без роялти)</em></span></p>
    </div>
    <div id="perevodozvuchka">
        <img src="/images/list3.jpg" border="0" width="40" height="114">
        <p>
            <b>Стартовые инвестиции: от 970 000 тенге (~2 200$ или 160 000 руб) </b><em style="color: #3366ff;">*Стартовые инвестиции могут быть намного меньше в случае, если данная фарншиза будет в виде дополнительного бизнеса.</em>
        </p>
    </div>
</div>

Код: css

#obshee > div {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: large;
    font-weight: 600;
}

так как я его убрал и стало больше места, можете увеличить растояние между блоками с листьями? Как на этом скриншоте?

<div id="obshee" style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap:16px;">

В этом Вам поможет свойство grid-gap

Код: html

<div id="obshee" style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap:16px;">

А можно ли в этой сетке создать 6 штук?

grid;grid-template-columns: repeat(6, 1fr);

grid;grid-template-columns: repeat(6, 1fr)

Сделал 6 штук, но теперь новые 3 штуки все стали только по горизонтали (скриншот прикрепил).
А можно ли сделать так, чтобы остальные 3 штуки стояли снизу? Или может ваш код еще раз повторить но уже поменять название дивов с новыми картинками и текстом?

Если вам нужно три колонки то измените с 6 на 3 и в коде добавьте новые 3 элемента, и они будут выводиться с низу как 2-й ряд

Как сделать так чтобы блоки с листьями были в вертикальном положении как на втром скриншоте?

@media (max-width: 767.98px){
	grid-template-columns: repeat(1, 1fr);
}

@media (max-width: 767.98px){
grid-template-columns: repeat(1, 1fr);
}

Вставил в template.css но не работает.

@media (max-width: 767.98px){
    #obshee {
        grid-template-columns: repeat(1, 1fr)!important;
    }
}

А можно ли сделать так, чтобы остальные 3 штуки стояли снизу? Или может ваш код еще раз повторить но уже поменять название дивов с новыми картинками и текстом?