Dino Winchester

<div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

Вариант первый:

.container {
    display: grid;
    grid-gap: 10px;  
    grid-template-areas: 
      "A A B"
      "A A C"
      "A A D";
}

.card:nth-child(1) {
    grid-area: A;
}

.card:nth-child(2) {
    grid-area: B;
}

.card:nth-child(3) {
    grid-area: C;
}

.card:nth-child(4) {
    grid-area: D;
}

Вариант второй:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.card:nth-child(1) {
   grid-row: span 3;
   grid-column: span 2;
}

Выше два примера для создания сетки для карточек, а для наложения текстовых блоков можно использовать абсолютное позиционирование. Хотя можно и гридами сделать, но это дело выбора.

Есть библиотека под названием Conveyer которая имеет подобный функционал.

В качестве альтернативного варианта, можно взять слайдер Swiper. В этом слайдере есть всё что нужно для реализации подобных элементов со скроллом. Ну, а ещё можно выпилить лишнее и собрать слайдер с нужными модулями, после чего вес слайдера уменьшится.

Думаю что есть ещё много других альтернатив, в том числе и реализация данного функционала без стороннего кода, но такой вариант стоит рассматривать если вы уверены в своих знаниях и способны учесть множество моментов, которые нужно учитывать.

Устанавливать фиксированные значения для свойства width - не совсем корректно. Да и к тому же вы используется гриды, не совсем так как нужно.

Немного подправил ваши стили:

.register__inner {
     width: 100%;
}

.register__form {
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
     grid-gap: 10px;
}

.register__input {
     width: 100%;
     height: 65px;
     border: 1px solid #d8d8d8;
     border-radius: 5px;
     padding: 27px 24px 23px;
}

.register__btn {
     width: 100%;
     height: 65px;
     border: none;
     border-radius: 5px;
     background: #ffe100;
}

У элемента .register__form в принципе можно установить значение grid-template-columns: repeat(2, 1fr), а потом через медиа запросы поменять, но это уже второстепенная задача.

Если верстка имеет примерно такой вид:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>

А нужно чтобы было так:

<p>Lorem 
ipsum dolor sit amet consectetur adipisicing elit. </p>

Тогда, увы, но средствами CSS такого эффекта добиться не выйдет. В CSS имеется псевдоэлемент ::first-letter для стилизации первой буквы в строке, но нет псевдоэлемента :first-word, который мог бы дать возможность стилизовать первое слово. Так что как вариант, можно обернуть первое слово в дополнительный тег, например в span через html руками или через JS. После чего станет доступна стилизация первого слова. Ну или всё таки вставить тег br в нужном месте.

Например можно сделать как-то так:

<p class="target">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>

const target = document.querySelector(".target");

target.innerHTML = target.innerText
     .split(" ")
     .map((w, i) => (i > 0 ? w : `<span>${w}</span>`))
     .join(" ");

.target > span:first-child {
  display: block;
}

В результате, все слова идущие после первого слова, будут на новой строке.

Подключение библиотек/плагинов через CDN конечно в той или иной степени может увеличить скорость загрузки, но нужно понимать что у такого подхода есть свои подводные камни.

На самом деле минусов может быть больше, но я выделю два основных:

1. Неизвестно какое обновление получит та или иная внешняя библиотека, что в свою очередь может стать угрозой для безопасности.

2. Несмотря на популярность CDN, не стоит забывать что эта сеть не является настолько мощной, чтобы пробиваться сквозь различные блокировки сайтов, интернет провайдерами.

Приведу небольшой пример для второго пункта из списка подводных камней.

Имеется какой-нибудь сайт, например интернет магазин. Сам сайт открывается отлично, всё работает, но на сайте через CDN подключены несколько десятков библиотек, допустим: Слайдер, Модальные окна, Аккордеоны, Тултипы и ещё 100500+ библиотек и плагинов.

У 99% посетителей всё будет загружаться, работать отлично, но есть как минимум 1% людей у которых подключение к CDN блокируется. Получается что у этого процента посетителей сайт будет отображаться кривым и поломанным, а ещё множество функций будут недоступны. Если суть не понятна, тогда сверстайте страницу, напичкайте её компонентами, а затем просто отключите скрипты и стили. Не думаю что результат понравится вам как разработчику, а обычным пользователям тем более.

В общем подводя итоги, хочется сказать что прежде чем слепо подключать что-то из CDN, нужно подумать, а нужно ли вам это на самом деле или нет. Ведь не все пользователи у которых криво отображается сайт из-за незагруженных стилей и скриптов, умеют и/или должны открывать консоль, читать ошибки и репортить об этом администрации.

Можно было бы конечно привести ещё какие-нибудь примеры подводных камней, но я не особо в курсе прям всех плохих сценариев, потому что обычно подключаю библиотеки из того же хранилища, где лежат основные скрипты/стили/etc.

Ну, а выбирать между нативным fetch и axios, нужно исходя из нужного функционала. На данный вопрос сложно ответить, так как это зависит от многих факторов.

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