Столбцы одинаковой ширины в Olivero

Я отображаю поле ссылки на объект, которое содержит 4 изображения (элементы мультимедиа). По умолчанию они отображаются в 4 ряда один под другим. Я хочу показать их рядом. Olivero — это тема, которую я использую.

Если я установлю .grid-полный к родительскому элементу, тогда действительно 4 изображения расположены в столбцах. Однако они занимают только 1 столбец из 14 столбцов сетки.

Кажется, мне нужно добавить что-то вроде сетка-столбец: 1/3; к каждому изображению, но количество изображений является динамическим (может быть 4 или более), поэтому я не могу знать значения заранее. Не говоря уже о том, что я не могу выбирать элементы по отдельности в CSS, поскольку у них нет уникальных идентификаторов.

Тот же сценарий действительно прост с Bootstrap. Назначение только col-sm сделал бы свое дело.

Интересно, есть ли решение моего вопроса и почему в Оливеро требуется явно указывать диапазон каждого столбца.

HTML выглядит следующим образом:

<div class="field field--name-field-screenshots field--type-entity-reference field--label-visually_hidden">
    <div class="field__label visually-hidden">Screenshots</div>
          <div class="field__items">
              <div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-01LoginScreen.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-01LoginScreen.png" width="270" height="480" alt="Tunedeck Login" title="" loading="lazy" typeof="foaf:Image">

</a>
</div>
          <div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-02Search.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-02Search.png" width="270" height="480" alt="Search Music" title="" loading="lazy" typeof="foaf:Image">

</a>
</div>
          <div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-03NowPlaying_0.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-03NowPlaying_0.png" width="270" height="480" alt="Now Playing" title="" loading="lazy" typeof="foaf:Image">

</a>
</div>
          <div property="schema:image" class="field__item"><a href="URL/files/styles/extra_large/public/2020-06/iPhone%208%20Plus-04Gestures.png" class="photoswipe" data-size="576x1024" data-overlay-title=""><img src="URL/files/styles/large/public/2020-06/iPhone%208%20Plus-04Gestures.png" width="270" height="480" alt="Tunedeck - Gestures" title="" loading="lazy" typeof="foaf:Image">

</a>
</div>
              </div>
      </div>