I'd like to preface this with the fact that I'm still very new to CSS so anything absolutely helps! I'm using CSS grid system to create the layout of this webpage and I was having lots of trouble getting it to look exactly how I designed it within Adobe XD.
Here's the design 
and here's what it's looking like.. pretty bad.
Specifically I'm having lots of trouble deciding how to structure the grid so that it is responsive in that the image and paragraph text collapse one on top of each other when on mobile as well as having the paragraph div overlap on top of the image as shown in the Design 1 I imagined I could somehow get my desired result if I used flexbox or grid system with the .descriptional-panel-image-container and .descriptional-panel-paragraph wrappers, but I'm open to suggestions and feedback.
Here's my html
.about-grid-container {
display: grid;
grid-template-columns: 3fr 9fr 3fr;
grid-template-rows: 37vh 53vh 81vh 53vh;
grid-template-areas:
"side header side"
"side jalisco-panel side"
"side family-panel side"
"side smile-panel side";
}
main {
grid-area: 1 / 2 / 2 / 3;
}
.descriptional-panel-skin-background {
grid-area: 2 / 1 / 5 / 4;
background-color: #FAE7DA;
}
.descriptional-panel-brown-background {
grid-area: 3 / 1 / 4 / 4;
background: url("landscaping/images/background-asset.png") no-repeat;
background-size: 100% 100%;
}
.descriptional-panel-jalisco {
grid-area: 2 / 2 / 3 / 3;
}
.descriptional-panel-family {
grid-area: 3 / 2 / 3 / 3;
}
.descriptional-panel-smile {
grid-area: 4 / 2 / 4 / 3;
}
.descriptional-panel-jalisco, .descriptional-panel-family, .descriptional-panel-smile {
display: grid;
padding-top: 5vh;
padding-bottom: 5vh;
/* padding: 5vh; */
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
/* box-shadow: 10px, 10px, 10px rgba(0, 0, 0, 0.1); */
justify-content: center;
}
.descriptional-panel-paragraph {
background-color: #FFF;
flex-basis: 45vw;
}
.descriptional-panel-paragraph-shade {
background-color: #AD9586;
flex-basis: 45vw;
}
.descriptional-panel-image-container {
background-color: blue;
justify-content: space-around;
flex-basis: 45vw;
}
.descriptional-panel-image-container img{
width: 100%;
justify-content: center;
}
/* .descriptional-panel-paragraph, .descriptional-panel-image-container {
} */
@media (max-width: 768px) {
.about-grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2fr 4fr 7fr 4fr;
}
}<div class="about-grid-container">
<main>
The american dream
</main>
<div class="descriptional-panel-skin-background">
</div>
<div class="descriptional-panel-brown-background">
</div>
<section class="descriptional-panel-jalisco">
<p class="descriptional-panel-paragraph"> With With over 35 years of experience in manual labor, Manolo is here to serve the greater Antioch community with quality landscaping. </p>
<div class ="descriptional-panel-image-container">
<img src="{% static 'landscaping/images/Jalisco_in_Mexico@2x.png' %}" alt="Jalisco Map">
</div>
</section>
<section class="descriptional-panel-family">
<p class="descriptional-panel-paragraph"> With With over 35 years of experience in manual labor, Manolo is here to serve the greater Antioch community with quality landscaping. </p>
<div class ="descriptional-panel-image-container">
<img src="{% static 'landscaping/images/manolo_family.JPG' %}" alt="Manolo Family">
</div>
</section>
<section class="descriptional-panel-smile">
<p class="descriptional-panel-paragraph"> With With over 35 years of experience in manual labor, Manolo is here to serve the greater Antioch community with quality landscaping. </p>
<div class ="descriptional-panel-image-container">
<img src="{% static 'landscaping/images/smiling_manolo.jpg' %}" alt="Manolo Smiling">
</div>
</section>
</div>