1. Делаете контейнер, складываете в него блоки.
2. Картинки закругляются с помощью border-radius: 50%
3. Список - списком, тут вроде нет сложностей.
4. Всем блокам кроме каждого четвертого задаете нижнюю и правую рамки.
Для этого потребуется https://webref.ru/css/nth-child
5. Задаете блокам ширину. Возможно, в процентах. Если блоки должны быть разной ширины, возможно, потребуется calc.
Остальное после вашего кода в песочнице (например, jsfiddle.net) или конкретных вопросов с чем у вас проблемы.
1. Перенести дотсы выше текста.
Потому что если их расположение по высоте будет зависеть от высоты слайдов, то они будут прыгать. А прыгающие элементы управления не очень хорошо.
2. Перенести кнопку перехода в каталог, прибить к низу слайда. Но это не очень красиво смотрится (на мой взгляд).
Gagatyn, нормальный вариант только один: не делать границу изначально.
Остальное: outline, позиционирование, clip, внутренние тени или границы у вспомогательных элементов это извращение
HarryStein, да надо просто использовать флексы из моего решения.
Если не получается, то выложить ссылку на песочницу со своим кодом.
(Там есть кнопки Run и Fork)
.slick-dotsили типа того