Сергей delphinpro

Object fit у вас прекрасно работает. У вас не работает height:100% на картинке.
У родителя нет высоты. Есть min-height, а это не подходит. Чтобы сработал height в процентах, у родителя должна быть явно заданная высота. Если она в процентах, то у его родителя тоже должна быть задана высота и т.д.
Либо блок должен находится во flex/grid контейнере.

Графики обычно рисуются на стороне клиента, джаваскриптом.
И библиотеки для этого есть - Charts, Highcharts и куча других, более или менее навороченных.
Эти две я пробовал. Charts позволяет сделать многое и довольно простая.
А Highcharts - это вообще бомба, там куча настроек и кастомизаций https://www.highcharts.com/demo

Причем здесь теги laravel и php я вообще не понял...

Как-то так, примерно.
Никогда не используйте повторяющиеся ID. У вас именно с этим проблема. Ну не совсем с этим, но из-за этого вы не разглядели суть.

function showThumbnail($img, href, title) {
    $img.attr('src', href);
    $img.attr('alt', title);
}

$(".gallery__list").each(function($gallery){
    let $largeImg = $gallery.find('.galleru__item-prem');
    $gallery.mouseover(function(event){
        let thumbnail = event.target.closest('.galleru__item');
        if (!thumbnail) return;
        
        showThumbnail($largeImg, thumbnail.href, thumbnail.title);
    });
});

Хотя тут и jquery то не нужен

function showThumbnail(img, href, title) {
    img.src = href;
    img.alt = title;
}

document.querySelectorAll('.gallery__list').forEach(function(gallery){
    const largeImg = gallery.querySelector('.galleru__item-prem');
    if (!largeImg) console.warn('Нет большой картинки');
    gallery.addEventListener('mouseover', function(event){
        const thumbnail = event.target.closest('.galleru__item');
        if (!thumbnail) return;
        
        showThumbnail(largeImg, thumbnail.href, thumbnail.title);
    });
});

UPD

Все файлы складываете в недоступное из web место.
Даже на шаред хостингах у вас есть домашняя директория, в которой расположен каталог public_html, в котором уже лежит ваш сайт. Вот на одном уровне с public_html, в домашнем каталоге создайте папку files и складывайте туда.

Далее генерируете пользователю ссылку вида
https://mysite.ru/download/sadlflksdjfkj
Hash кладете в табличку в бд и устанавливаете время жизни, связываете ее с зарегистрированным пользователем и нужным файлом.
Регистрируете в приложении маршрут
'/download/{hash}'
в обработчите маршрута получаете это хэш, ищете в базе запись с ним. Проверяете, не истекло ли время жизни, тот ли пользователь ее открыл, и если все норм, с помощью readfile отдаете нужный файл на скачивание.

Всё возможно.
Например, так



Поддержка в целом неплохая https://caniuse.com/css-masks
Но если надо более надежно, то css-маску можно поменять на svg-маску

return [
         "id" => "required",
         "email" => "required|email",
         "names.*.name" => "required"
];

Обычные картинки на фоне.
Фоны могут быть множественными.
Фоны могут позиционироваться.
Плюс медиа-запросы для корректировки.

генерируете ключ. Заливаете его на гитхаб.
пушите в репу в URL который выглядит примерно так git@github.com:username/reponame.git

Отрицательный margin-left

Собственно и ваш вариант работает.

<div class="container">
    <div class="block">
        <div class="text">
            Lorem ipsum...
        </div>
    </div>
</div>

Три варианта, как минимум

На гридах

.block {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.text {
    grid-column: 2 / 3;
}

На флексах

.block {
    display: flex;
}
.text {
    width: 50%;
    margin-left: auto;
}

Самое простое

.text {
    margin-left: 50%;
}

Просто держите открытую консоль браузера во время разработки. Не забудьте там включить птичку Disable Cache.
Выключать ее необязательно. При закрытой консоли отключение кеша не работает.

ChatGPT рулит =)

let inputString = "+... ... ... ... ... ..";
let stringArray = inputString.split(" "); // разбиваем строку по пробелам
stringArray.shift(); // удаляем первый элемент массива
let outputString = stringArray.join(" "); // склеиваем оставшиеся элементы массива в строку
console.log(outputString); // выводим результат в консоль

Ну а я перепишу по своему

let inputString = "+... ... ... ... ... ..";
let result = inputString.split(" ").slice(1).join(" ");
console.log(result);

Вероятно, картинка ресайзится в сниппете product.dl. Там происходит подготовка данных к выводу.

Потому что у вас там одна запись
Ее нужно просто вывести без цикла

<span class="rules-intro__text">
    <?=$rulesCategoryOne['content']?>
</span>

Либо фетчить все строки

$rulesCategoryAll = $queryCategoryOne->fetch_all();
// Я не знаю как у вас называется такой метод!!!


<?php foreach($rulesCategoryAll as $rule): ?>
<span class="rules-intro__text">
    <?=$rule['content']?>
</span>
<?php endforeach; ?>