Pavel-ww

Не думаю, что получится сбросить восстановить в текущем сайте. Если осталась joomla 1.5 пробуйте этот компонент https://extensions.joomla.org/extension/jupgradepro/

Ну во-первых fr это не статично, а динамично. И 100fr в контексте вашего примера - это не верно. В контексте вашего примера должно быть grid-template-columns: 1fr;, что задает одну колонку. Если вам нужно 100 колонок то это будет так grid-template-columns: repeat(100, 1fr);. fr=фракция, то есть часть grid контейнера.
Ну а что касается авто переноса, то код будет такой (при условии что минимальная ширина колонки например 150px. подставьте ваше значение)

.block-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
}

Разные размеры задаются путем назначения начальной и конечной колонки/строки расположения.
Например:

.grid__item {
	 grid-column: 1/3; 
}

В этом случае блок к которому вы обращаетесь будет занимать две колонки

Не правильная разметка и не те css свойства - причина проблемы. Пытаетесь прикрутить костыль к костылю.

<div class="wrapper">
        <div class="numbers">12345</div>
        <p class="text">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio, nam numquam soluta voluptas quasi laboriosam
            temporibus officia culpa nulla iure.
        </p>
    </div>

.wrapper {
    border: 1px solid red;
    max-width: 200px;
    display: flex;
}
.numbers {
    background-color: yellow;
}

Например так

/*Появление меню при наведении на вкладку */
.vklmenu:hover .drmenu {
    display: block;
    animation: myFadeIn 400ms ease-in;
}
@keyframes myFadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

Здравствуйте. Виновен не picture, а стандартные стили браузера, которые обычно сбрасываются с помощью normalize.css.
Сброс стилей браузера для img решит проблему.

img {
    vertical-align: middle;
}

display: block; для img тоже сработает, но это костыль в данном контексте. Вдруг вам где-то дальше не нужен будет display: block; , тогда придется его постоянно сбрасывать.

Всегда подключайте normalize.css чтобы не бороться с приведениями браузерных стилей

Без ссылки можно только гадать. Но подозреваю что проблема в .container, в "и выравнивает все по середине". Подозреваю флексом выравнивает? Если да, удалите это и просто добавьте к .lots margin: 0 auto;. И то только в том случае если ширина .lots меньше чем ширина контейнера. Никогда не используйте в .container какое либо выравнивание только ширину. Выравнивание должно осуществляться внутри обертки .lots, если это требуется

Это удалите

.gallery-slider .owl-item.center img {
	height: 700px;
}
.gallery-slider .gal-slide img {
  height: 100%;
  display: block;
}

Это добавьте

.gallery-slider .owl-item.active.center .gal-slide {
	height: 700px;
}

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

Если нет доступа к HTML то с помощью css только скролл.

Изменяйте высоту в каждой точке остановки через медиазапрос. Какие с этим трудности?
А когда контейнер переходит на ширину 100% (<575px) попробуйте единицы vw для высоты (но только зачем?)

@media (max-width: 1320px) {
    .back_products {
        height: 330px;
    }
}
@media (max-width: 1199px) {
    .back_products {
        height: 300px;
    }
}
@media (max-width: 991px) {
    .back_products {
        height: 250px;
    }
}
@media (max-width: 767px) {
    .back_products {
        height: 200px;
    }
}
@media (max-width: 575px) {
    .back_products {
        height: 30vw;
    }
}