How can I center image and text in grid? - html

Question

I'm still a rookie, trying to learn HTML and CSS. I'm trying to use 1fr 1fr grid for my "welcome" section. Idea is to put an image on the left side, and text on the right side.
When i go to Inspect and try to see it in Responsive mode, my grid colapses when width goes below 1300, or when height goes below 900.
This is my first section after header, so my question is how should I handle this situation? I don't want to build entire page like this and then realize that I need hundreds of lines of media queries because I used the wrong concept from the beginning :)
I'm trying to get something like this: Example
Below is my code:
.welcome {
padding: 7em 0;
display: flex;
justify-content: center;
}
.welcome-container {
display: grid;
justify-content: center;
align-content: stretch;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
background-color: white;
height: 50vh;
width: 50vw;
overflow: hidden;
}
.welcome-left {
padding: 3em;
border: 1px blue solid;
text-align: center;
}
.welcome-img {
background-image: url(../../img/tetiana-padurets-B-xb7VFtlZg-unsplash.jpg);
width: 100%;
height: 100%;
}
.img {
display: block;
}
.welcome-right {
border: 1px red solid;
padding: 5em 3em;
}
.welcome-title {
text-align: center;
color: #3f3f3f;
font-weight: 400;
margin-top: 1em;
}
<section class="welcome">
<div class="welcome-container">
<div class="welcome-left">
<div class="welcome-img"></div>
</div>
<div class="welcome-right">
<h2 class="welcome-title"><span>Lorem Ipsum!</h2></span>
<p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores.
</p>
</div>
</div>
</section>
Cheers!

Answer 1

<section class="welcome">
<div class="welcome-container">
<div class="welcome-left">
<div class="welcome-img">
<img class="image" src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U">
</div>
</div>
<div class="welcome-right">
<h2 class="welcome-title"><span>Lorem Ipsum!</h2></span>
<p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores.
</p>
</div>
</div>
</section>
In CSS
.welcome {
display: flex;
justify-content: center;
width: 100%;
}
.welcome-container {
display: grid;
justify-content: center;
align-content: stretch;
grid-template-columns: 1fr 1fr;
background-color: white;
width: 50vw;
}
.welcome-left {
padding: 10px;
border: 1px blue solid;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.image {
width: 100%;
height: auto;
}
.img {
display: block;
}
.welcome-right {
border: 1px red solid;
padding: 10px;
}
.welcome-title {
text-align: center;
color: #3f3f3f;
font-weight: 400;
font-size: 2vw;
margin-top: 1em;
}
.welcome-desc {
font-size: 1vw;
}
.welcome-img {
width: 100%;
}
I guess you want something like this.