karmyskove

Вставь код сюда: https://yoksel.github.io/html-tree/
Сервис покажет где у тебя проблемы

Элементу списка добавь checked

Пример: https://codepen.io/EugeneKarmyshkov/pen/NWjOYrG

В примере много лишних свойств написал, ниже ключевые выделю.

Для карточки:

display: flex;
flex-direction: column;

Заголовок и текст карточки становятся flex элементами, чтобы title имел одинаковую высоту, ему просто можно указать свойство flex: 1 1 auto;
В случае если надо чтобы текст подстраивался, тогда для него указывай это свойство.

Есть отличная программа для работы с предпроцессором prepros называется
Отличное видео по настройки этой программы: https://www.youtube.com/watch?v=BqO5Pj26om8&ab_cha...

Пример тебе на кидал на скорую руку: https://codepen.io/EugeneKarmyshkov/pen/MWmvryZ
Смысл в чем, с помощью js считай количество элементов в строке и в зависимости от количества родительскому контейнеру подключай один из двух классов.
Скажем в моем примере в строку входит 4 элемента, значит добавляю класс flex-container-jc, в другом случае flex-container-start

Примеров где добавляют классы с помощью js есть море )

Для .slider следует добавить вот эти свойства:

display: flex;
justify-content: center;

Изображение по центру встанет.
Чтобы текст был как на изображении, нужно классу title задать свойство: max-width: 550px;
Вот ссылка codepen: https://codepen.io/EugeneKarmyshkov/pen/wvdqPez

Для начала, можно сократить код, div с классом "dots-item" можно оставить один, две другие точки нарисовать с помощью псевдо элементов, код будет более компактным. А про адаптив точек, тут могу сделать предположение, нужно использовать позиционирование, картинке задай postition: relative, а для div position: absolute. Точки уже не будут уезжать за границы картинки, а позиционирование точек задай в процентах, скажем left: 20%, top: 15%; значения будут зависеть от картинки, если где-то будет сильно съезжать, использую media, и вручную не много подправь. Возможно есть и более элегантное решение поставленной задачи, но моих скромных навыков хватает только на такое решение ;D

Свойство overflow: hidden в связке с max-heigth должно решить твою проблему

Использую тег picture, в нем можно указать отдельно картинки для разных разрешений экрана. Так для мобильной версии просто сделай более маленькую картинку и ее подгружай.
Просто когда ты большие картинки сильно жмешь понятно дело что качество теряется )

Если не хочешь использовать flex есть множество других способов, например: табличный метод, float, grid, с помощью позиционирования (absolute, relative или в связке), с помощью margin, transform: translate. Самый лучший способ думаю все же с помощью flex или grid.
Вот две шпаргалки по grid и flex:
https://fls.guru/flexbox.html
https://fls.guru/grid.html