Как разместить 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 должны переместиться и выглядить так. 