<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="https://picsum.photos/id/237/500/300" alt="">
            <div class="group">
              <b class="bs">Сияние</b>
            <p class="pk">Kerama Marazzi</p>   
            </div>
        </div>

        <div class="colection_inner-1 b">
            <img class="grid-img" src="https://picsum.photos/id/236/500/300" 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="https://picsum.photos/id/238/500/300" 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="https://picsum.photos/id/239/500/300" 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="https://picsum.photos/id/240/500/300" alt="">
            <div class="group">
              <b class="bs">Гинардо</b>
            <p class="pk">Gracia Ceramica</p>   
            </div>
        </div>

       </div>
    </div>
    
</section>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
.colectia {
  /*margin-top: 350px; no -will never work in a responsive layout*/
  font-family: "Montserrat";
}
.container{
  max-width:1280px;
  margin:auto;
}
.colection_inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 1rem;
  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%;/* important must not be removed*/
  height: 100%;/* important must not be removed*/
  object-fit: cover;/* important must not be removed*/
}

.colection_inner-1 {
  position: relative;
}
.group {
  position: absolute;
  color: white;
  left: 20px;/* use rem not px*/
  bottom: 0;
}
.bs {
  font-size: 24px;/* use rem not px*/
  font-style: normal;
  font-weight: 700;
  line-height: 30px;/* use unitlerss line-height not px*/
  background: rgba(59, 185, 184, 0.8);
  padding: 14px 20px;
}
.pk {
  margin-top: 20px;
  margin-left: 20px;
  font-size: 14px;/* use rem not px*/
}

@media screen and (max-width: 800px) {
  .colection_inner {
    display: block;
  }
}

/*  

Forum question anser only: 

https://www.sitepoint.com/community/t/how-to-correctly-place-multiple-images/436848/8



/*