Доступ к фокусным точкам X и Y изображения в рогах ⇐ CSS

[Гость]

Я работаю над каким-то веб-сайтом, который предъявляет иск Statamic CMS к рогам с помощью Tailwind.css и AlpineJS, и на одной из страниц есть раздел, в котором отображается поле репликатора с заголовком, описанием и различным количеством изображений.< /p>
Изображения имеют динамический макет в виде сетки, который должен следовать этому
шаблону
Эта часть выполнена, все работает как положено. Единственная проблема заключается в том, что сейчас я обрезаю изображения и фокус находится в центре. Во многих случаях я устанавливаю фокусы изображений вручную в CMS, используя функцию фокуса. Кажется, я не могу найти способ извлечь эти точки X и Y без добавления дополнения, и я действительно не хочу его добавлять, потому что я хочу сделать это сам и научиться.
Кроме того, у меня есть AlpineJS в этом проект, поэтому, если какое-либо решение понадобится, оно есть
Мой текущий код:
шаблон:
{{ elements sort="order" }}

{{ title }}

{{ description }}

{{ images }}



{{ /images }}


{{ /elements }}

дополнительный CSS:
@media (min-width: 768px) {
.case__gallery {
.image-container {
@apply w-full;
}
.image-container:nth-of-type(5n+1),
.image-container:nth-of-type(5n+5) {
@apply w-2/3;
}

.image-container:nth-of-type(5n+2),
.image-container:nth-of-type(5n+4) {
@apply w-1/3;
}
.image-container:nth-of-type(5n+3) {
@apply w-full;
}
}
}

Что я пробовал:
{{ elements sort="order" }}

{{ title }}

{{ description }}

{{ images }}




{{ /images }}


{{ /elements }}


Подробнее здесь: https://stackoverflow.com/questions/781 ... in-antlers