<section class="colectia">
    <div class="container">
     <h2 class="title">Коллекции плитки</h2>
       <div class="colection_inner">
        <div class="colection_inner-1 a">
            <img class="grid-img" src="img/image35.jpg" alt="">
            <div class="group1">
              <b class="bs">Сияние</b>
            <p class="pk">Kerama Marazzi</p>   
            </div>
        </div>

        <div class="colection_inner-1 b">
            <img class="grid-img" src="img/image36.jpg" alt="">
            <div class="group">
              <b class="bs">Вестанвинд </b>
            <p class="pk">LB-Ceramics</p>   
            </div>
        </div>
        <div class="colection_inner-1 c">
            <img class="grid-img" src="img/image37.jpg" alt="">
            <div class="group">
              <b class="bs">Rotterdam</b>
            <p class="pk">Gracia Ceramica</p>   
            </div>
        </div>
        <div class="colection_inner-1 d">
            <img class="grid-img" src="img/image39.jpg" alt="">
            <div class="group">
              <b class="bs">Rane</b>
            <p class="pk">Alma Ceramica</p>   
            </div>
        </div>
        <div class="colection_inner-1 e ">
            <img class="grid-img" src="img/image38.jpg" alt="">
            <div class="group">
              <b class="bs">Гинардо</b>
            <p class="pk">Gracia Ceramica</p>   
            </div>
        </div>

       </div>
    </div>
    
</section>
.colectia{
  margin-top: 350px;
  font-family: "Montserrat";
}


.colection_inner{
  
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  
  grid-template-areas: 
  "a b c"
  "a d e  " ;
}
.a{
  grid-area: a;
}
.b{
  grid-area: b;
}
.d{
  grid-area: d;
 
}
.e{
  grid-area: e;
}
/* .grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.colection_inner-1{
  position: relative;
}
.group1{
  position: absolute;
  top: 420px;
  left: 20px;
  color: white;
  
}
.group{
  position: absolute;
  color: white;
  left: 20px;
 top: 160px;
}
.bs{
  font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 30px;
background: rgba(59, 185, 184, 0.80);
padding: 14px 20px;

}
.pk{
  margin-top: 20px;
  margin-left: 20px;
  font-size: 14px;
  
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.