Как опустить текст на картинку,чтоб из этого получить это ? ( Грид не убирайте,он мне нужен будет )
.giphone {
text-align: center;
}
.gih1 {
font-size: 44px;
}
.gih5 {
font-size: 21px;
font-family: 'sanfranciscolight';
font-weight: 400;
}
.giphone-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.giphone a {
color: #0066cc;
text-decoration: none;
font-size: 21px;
}
.giphone a:hover {
text-decoration: underline;
}
<div class="giphone-wrapper">
<div class="giphone">
<h1>Перейти на iPhone
<br>
очень просто.</h1>
<p><a href="#">Подробнее ></a></p>
<div class="pgiphone">
<img src="static/images/image.psd (7).png" alt="">
</div>
</div>
<div class="giphone">
<img src="static/images/image.psd (8).png" alt="">
<h1 class="gih1">Конфиденциальность</h1>
<h5 class="gih5">Только вам решать,
<br>
кому будут доступны ваши данные.</h5>
<p><a class="gia" href="#">Подробнее ></a></p>
<div class="pgiphone">
<img src="static/images/image.psd (6).png" alt="">
</div>
</div>
</div>