JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="block">
      <div class="h1">Наши услуги</div>
  <div class="content">
        <a href="#" class="service service-1">
          <div class="img" style="background-image: url(https://fotki.yandex.ru/next/users/vesking36/album/596974/view/2789042);"></div>
          <div class="info">Дизайн домов</div>
        </a>
        <a href="#" class="service service-2">
          <div class="img" style="background-image: url(img/2min.jpg);"></div>
          <div class="info">Два три четыре</div>
        </a>
        <a href="#" class="service service-2">
          <div class="img" style="background-image: url(img/3min.jpg);"></div>
          <div class="info">Пять шесть семь</div>
        </a>
        <a href="#" class="service service-2">
          <div class="img" style="background-image: url(img/4min.jpg);"></div>
          <div class="info">Восемь девять десять</div>
        </a>
      </div>

CSS

.container {
    background-color: #e3ecef;
}
.content {
    display: flex;
    flex-wrap: wrap;
}
.img {
    width: 262px; 
    height: 197px;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}
.img {
    -moz-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 -webkit-transition: all 0.3s ease-out;
}
.service:hover .img {
    -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
}
.service {
    padding-left: 15px;
    padding-right: 15px;
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    flex: none;
}
.info {
    margin: 15px 0 15px 0;
    text-align: center;
    font-family: Medium;
    font-size: 18px;
    line-height: 24px;
    color: #000;
    font-weight: 500;
}
.block {
    margin-left: 4.2%;
    margin-right: 4.2%;
    padding-top: 37px;
    padding-bottom: 31px;
}
.h1 {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 18px;
    padding-bottom: 33px;
    text-align: center;
    font-size: 36px;
    font-weight: 300;
    line-height: 42px;
    color: #000;
    font-family: Light;
}
.block a {
  text-decoration: none;
}

@media screen and (max-width: 1200px),
only screen and (max-device-width : 1200px) {
    .service {
      width: 50%;
    }
  }
  @media screen and (max-width: 600px),
only screen and (max-device-width : 600px) {
    .service {
      size: 30%;
    }
  }