css-How to place text and button on an image grid?

I created a CSS grid layout with 5 images that looks like below:

What I am trying to achieve is below:

However, I am using CSS grid and wondering if I could achieve this without using margin?

My code:

 <!--CSS Grid to display home page images -->
<div class="wrapper">

    <div class=" bed"><img src="{{asset('/images/Home_Bed.jpg')}}" alt="">
    
    </div>
    <div class="pillow"><img src="{{asset('/images/Home_Pillow.jpg')}}" alt=""></div>
    <div class=" kitchen"><img src="{{asset('/images/Home_Kitchen.jpg')}}" alt=""></div>
    <div class=" living-room"><img src="{{asset('/images/Shop_Page.jpg')}}" alt=""></div>
    <div class=" sofa"><img src="{{asset('/images/Home_Sofa.jpg')}}" alt=""></div>




</div>

@endsection

@push('style')
<style>

@media (max-width: 700px) {

.bed {
  grid-column: 1/-1;
  grid-row: 1 / -3;
}
.pillow {
  grid-column: 3;
  grid-row: 1 / 3;
}



.kitchen {
  grid-column: 3;
  grid-row: 2 / 5;
}



.living-room {
  grid-column: 1 / 3;
  grid-row: 3 / -1;
}



.sofa {
  grid-column-start: 3;
  grid-row: 5 / -1;
}

}



.wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  grid-template-rows: repeat(8, 1fr);
  padding: 5em;
  grid-gap: 2.5em;
  background-color: black;
  
  height: 900px;
  max-width: 100%;
}

.wrapper>div {
  position: relative;
}

.wrapper>div::after {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: black;
  color: white;
  padding: .5rem;
}

.bed {
  grid-column: 1/2;
  grid-row: 1/3;
  height: 110%;
  width:100%;
}


.pillow {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 110%;
  width:90%;
}



.kitchen {
  grid-column: 3;
  grid-row: 2 / 5;
}



.living-room {
  grid-column: 1 / 3;
  grid-row: 3 / -1;
}



.sofa {
  grid-column-start: 3;
  grid-row: 5 / -1;
}



img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}


body{
    background-color: black;
    }


.container {
  position: relative;
 
}


    .heading-part {
        border-bottom: 3px solid #e5e5e5;
        display: inline-block;
        width: 100%;
    }

    .main-title {
        margin-bottom: 0;
        font-size: 1.5rem;
        float: left;
        text-transform: uppercase;
    }

    .main-title::after {
        border-bottom: 3px solid #552244;
        content: "";
        display: block;
        margin-bottom: -3px;
        padding: 2px;
    }
</style>
@endpush

I need the text and button to be bottom of each image and the font size should be different since each image are of different resolution. Is there a way to implement this elegantly without making my code look like a mess?

Is there any way I can implement this according to the size of the image elegantly?

Edit:

This is how it looks on mobile