Grid css. Надо переместить блок с текстом под картинку
Мне надо переместить текст "Lorem..." под картинку используя grid css.
.main__item {
border: 1px solid #7c7c7c;
margin-top: 70px;
margin-bottom: 15px;
}
.item__title {
text-transform: uppercase;
font-size: 20px;
color: #444444;
font-weight: 700;
}
.item__block {
padding-left: 15px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 20px;
}
.bold {
font-weight: 700;
}
.item__text {
margin-bottom: 0.3em;
}
.item__span {
padding-left: 10px;
}
.item__img {
max-height: 250px;
}
.wrapper-block {
display: grid;
grid-column-gap: 25px;
grid-template-columns: 1fr 1fr 1fr;
}
.item__wrapper {
grid-column: 2 / 4;
}
.item__block-second {
grid-column: 2 / 4;
}
.item__block-first {
grid-column: 1;
}
<div class="main__item">
<div class="item__block">
<h4 class="item__title">1. Resident evil 7: biohazard</h4>
<div class="wrapper-block">
<div class="item__block-first">
<img src="img/item-img-first.PNG" alt="" class="item__img">
</div>
<div class="item__block-second">
<div class="item__wrapper">
<span class="item__sub-text"><span class="bold">Platform: </span>PC, PS4, Xbox, One, and Nintelendo Switch</span>
<br>
<span class="item__sub-text"><span class="bold">Price: </span>$20.98</span>
<br>
<span class="item__sub-text"><span class="bold">Rating: </span>7.7/10 IGN/85% Metacritic</span>
</div>
<div class="item__text-block" id="item__text-block">
<p class="item__text" id="tr"><span class="item__span">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Porro in est laudantium cum natus ea ratione aliquid, vitae adipisci, rerum fugit fuga veritatis! Perferendis, iste!</p>
<p class="item__text"><span class="item__span">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Tempora sequi enim temporibus totam magnam aperiam iure, amet voluptate, maxime asperiores, nostrum eos ipsum nam ad.</p>
<p class="item__text"><span class="item__span">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ad, inventore accusantium sed voluptas nulla quae sunt, consequuntur vel vitae labore perferendis atque voluptatum quo.</p>
<p class="item__text"><span class="item__span">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Ex minus qui repudiandae aut quas facere est deserunt, nulla, commodi maxime animi nesciunt quisquam quo saepe?</p>
</div>
</div>
</div>
</div>
</div>
