Как разместить div в grid сетке

Учусь верстать, первый раз пытаюсь создать тренировочный лендинг, не получается верно выравнять div, как надо по макету. У меня сейчас выглядит так. Мой лендинг. А должно выглядит вот так.Макет. Вот мой код

:root {
  --container-width: 1490px;
  --container-padding: 15px;
}

.wrapper {
  overflow: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1 1 auto;
}

[class*="__container"] {
  min-height: 100vh;
  display: flex;
}

.second__container {
  margin-left: auto;
  max-width: var(--container-width);
}

.second__content {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 70px;
  align-content:center;
}

.second__title {
  font-family: Montserrat-Bold, sans-serif;
  font-size: 36px;
  line-height: 44px;
  position: relative;
  height: fit-content;
  max-width: 450px;
}

.second__title::after {
  content: "";
  position: absolute;
  top: 4rem;
  background-image: url(../img/line_second.svg);
  min-width: 239px;
  height: 4px;
  background-size: contain;
}

.second__title::before {
  content: "";
  position: absolute;
  background-image: url(../img/oval_second.svg);
  min-width: 430px;
  height: 41px;
  z-index: -1;
  top: 18px;
  left: -111px;
}

.second__text {
  font-family: Montserrat-Regular, sans-serif;
  font-size: 18px;
  line-height: 28px;
  max-width: 450px;
  height: fit-content;
}

.second__text_span {
  font-family: Montserrat-Bold, sans-serif;
  font-size: 18px;
  line-height: 28px;
}

.second__text p {
  margin-top: 1.5rem;
}

.second__text p {
  margin-top: 2.5rem;
}

.second__photo {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  display: flex;
  height: fit-content;
  gap: 20px;
  margin: auto 0;
}

.group_photo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.second-photo_one {
  align-self: center;
}
<div class="wrapper">
  <main class="main">
    <section class="second__container">
        <div class="second__content">
            <div class="second__title">
                <h2>КАК ЭТО РАБОТАЕТ</h2>
            </div>
            <div class="second__text">
                <p><span class="second__text_span">Квизы</span> — это тесты, викторины и опросы, которые можно использовать не только для развлечения. За последние несколько лет тесты стали полноценным маркетинговым инструментом, помогающим продвижению любого проекта.
                </p>
                <p>Квиз помогает брендам лучше узнать потребителя, получить недорогие лиды и добиться большей вовлечённости аудитории.
                </p>
                <p><span class="second__text_span">Квизы — инструмент с высокой конверсией.</span></p>
            </div>
            <div class="second__photo">
                <div class="second-photo_one">
                    <img src="img/second-photo_one.png" alt=""></div>
                <div class="group_photo">
                    <div class="second-photo_two">
                        <img src="img/second-photo_two.png" alt="">
                    </div>
                    <div class="second-photo_three">
                        <img src="img/second-photo_three.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
  </main>
</div>

У меня между div class="second__title" и div class="second__text почему-то появляется пустое пространство. Не могу никак убрать его. Решил использовать grid потому что в мобильной версии div должны переместиться и выглядить так. Мобильная версия


Ответы (0 шт):