JSFiddle - React, Tailwind, and code Playground

by akk77

HTML

<div class="gallery-card">
<div class="gallery-card__img"><img src="https://sun1-21.userapi.com/s/v1/ig1/ahRs8H-OD0nyYwq1Y9NLsLmTpOB9JXcs-750cAgPgzWnN7oJR0iuiTQh8aujfx1bC6r1tAZr.jpg?size=400x0&quality=96&crop=0,0,530,795&ava=1" alt="Поездка на квадроциклах"> <h3> Поездка на квадроциклах</h3><p>
Поездка на квадроциклах от 15 000 рублей bla bla blabla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla blabla bla bla</p>
     </div>
</div>

CSS

.gallery-card{
 display: grid;
  grid-template-columns: 22vw;
  grid-template-rows: 90vw;
  grid-template-areas:"img";
  margin: 0;
  }
  .gallery-card__img{
    font-size: 2vw;
    grid-area: img; 
    margin: 0;
    overflow: auto;
}
 .gallery-card__img img{
    width: 20vw;
    height: 40vw; 
     grid-area: img;
    margin: 0;
}