Grid Layout Not functioning responsively

main-message-container

 <div class="main-message-container">        
        <div class="message-container">
            <div class="image-1">
              
            </div>
            <div class="text">
                <h2>
                    Gaming Peripherals
                </h2>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a earum voluptas, error mollitia odit culpa quos eum! Provident, dolorem cum nulla voluptatibus necessitatibus fugit corrupti? Autem neque modi facere?
            </div>
            <div class="text">
                <h2>
                    Gaming Peripherals
                </h2>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a earum voluptas, error mollitia odit culpa quos eum! Provident, dolorem cum nulla voluptatibus necessitatibus fugit corrupti? Autem neque modi facere?
            </div>
            <div class="image-2">
                
            </div>
        </div>
    </div>

.main-message-container{
    height: 90vh;
    background-color: red;
    display: flex;
    align-items: center;
    background: url(../assets/message-texture.jpg);
    background-size: cover; 
}
.message-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 80%;
    width: 80vw;
    margin-inline: auto;
}
.image-1{
    background: url(../assets/message2.jpg);
}
.image-2{
    background: url(../assets/message1.webp);
}

.image-1, .image-2{
    background-size: cover;
}
.text{
    background-color: black;
    color: white;
    justify-content: left;
    padding: 50px;
    font-size: 1rem;
}
.text>h2{
    color: red;
}