How to fix flexbox overlapping divs when using media query? - css

Question

I'm asking my first question here, so I apologize in advance if I didn't explain something well.
I'm currently developing portfolio website (Angular 13 with Sass). I've come to a point where I have two divs placed next to each other inside of a flexbox. I use media query (mobile view) to achieve divs to place below each other. One div contains text and other image.
I'm using Sass for flex box
#mixin flex-container($flexdirection, $justifycontent: false) {
#if $justifycontent {
justify-content: $justifycontent;
} #else {
justify-content: center;
}
display: flex;
flex-wrap: wrap;
row-gap: 20px;
align-items: center;
flex-direction: $flexdirection;
}
HTML component looks like this
<div class="about" id="about" #about>
<div class="about__details">
<h1 class="about__title">{{title}}<span class="purple_highlight">A</span>ndjela. <span class="wave">👋</span>
</h1>
<p class="about__paragraph">{{paragraph}}
</p>
<a href="https://drive.google.com/file/d/1PK82zuN4g_Ly5nmNIgRpIsEW9j_gnyaS/view?usp=share_link" target="_blank">
<button class="about__cv_button">My resume</button>
</a>
</div>
<div class="about__img">
<img src="assets/img/profilePicture.png" alt="profile">
</div>
</div>
CSS looks like this
#include mq-between(xs, sm) {
.about {
#include flex-container(row);
height: 100vh;
&__img {
background-color: aqua;
bottom: 0;
right: 0;
flex-shrink: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
&__details {
background-color: blanchedalmond;
left: 10%;
right: 10%;
}
}
}
Result looks like in picture
I've tried using flex-direction as column, flex-basis, max-width, max-height, padding and margin, but nothing seems to make changes for what I'm looking for.
What am I missing to show the divs beneath each other with the correct height?