Can you please tell me how to impose such a block adaptively?

.s-master { position: relative; background-image: url("../img/repairs7.png"); background-size: contain 100%; background-size: cover; background-position-y: top; background-position-x: right; background-repeat: no-repeat; margin-top: 50px; } .master-block { background: url("../img/repairs1.png"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 291px; overflow: hidden; border-right: 1px solid #fff; background-color: #af1919; } .master-block span { color: #fff; display: block; text-align: center; margin-top: 200px; font-family: "HelveticaNeueCyr-Roman"; font-size: 20px; font-weight: 700; line-height: 25px; } .master-block:hover { background-color: transparent; } .master-block:hover > span { color: #000; } .master-block2 { background: url("../img/repairs2.png"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 291px; overflow: hidden; border-right: 1px solid #fff; background-color: #af1919; } .master-block3 { background: url("../img/repairs3.png"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 291px; overflow: hidden; border-right: 1px solid #fff; background-color: #af1919; -webkit-box-shadow: 5px 20px 40px 10px rgba(0, 0, 0, 0.5); box-shadow: 5px 20px 40px 10px rgba(0, 0, 0, 0.5); } .master-block4 { background: url("../img/repairs4.png"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 291px; overflow: hidden; border-right: 1px solid #fff; background-color: #af1919; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-box-shadow: 5px 10px 40px 10px rgba(0, 0, 0, 0.5); box-shadow: 5px 10px 40px 10px rgba(0, 0, 0, 0.5); } .master-block5 { background: url("../img/repairs5.png"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 291px; overflow: hidden; border-right: 1px solid #fff; border-top: 1px solid #fff; background-color: #af1919; border-bottom: 1px solid #fff; -webkit-box-shadow: 5px 10px 40px 10px rgba(0, 0, 0, 0.5); box-shadow: 5px 10px 40px 10px rgba(0, 0, 0, 0.5); } .master-block6 { background: url("../img/repairs6.png"); background-size: cover; background-repeat: no-repeat; background-position: center; height: 291px; overflow: hidden; border-right: 1px solid #fff; background-color: #af1919; border-top: 1px solid #fff; margin-bottom: 170px; border-bottom: 1px solid #fff; -webkit-box-shadow: 5px 10px 40px 10px rgba(0, 0, 0, 0.5); box-shadow: 5px 10px 40px 10px rgba(0, 0, 0, 0.5); } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <section class="s-master"> <div class="container"> <div class="row no-gutters"> <div class="col-md-3"> <div class="master-block"> <span>Ремонт стартеров</span> </div> </div> <div class="col-md-3"> <div class="master-block2 master-block"> <span>Ремонт генераторов</span> </div> </div> <div class="col-md-3"> <div class="master-block3 master-block"> <span>Ремонт электро <br> моторчиков печки</span> </div> </div> <div class="w-100"></div> <div class="col-md-3"> <div class="master-block4 master-block"> <span>Замена подшипника <br> муфты компрессора <br>кондиционера</span> </div> </div> <div class="col-md-3"> <div class="master-block5 master-block"> <span>Продажа и доработка мощных генераторов <br>для автомузыки</span> </div> </div> <div class="col-md-3"> <div class="master-block6 master-block"> <span>Скупка б/у <br>стартеров, генераторов <br>12/24V</span> </div> </div> </div> </div> </section>