Flexbox for responsive card image and content - blog

Question

I'm trying to make my image and the content next to it to be responsive, currently, on the first breakpoint my image grows in height,

how can I use flexbox that my whole post gets smaller and stay inside my layout without losing the size of the image?

On full screen, it looks like this Full screen img on breakpoint 860px - Breakpoint img - should look like this

HTML

    <main class="main-content main-layout flex column">
      <div class="post flex">
        <img src="img/post1.png" alt="" class="post-img" />
        <div class="post-content flex column">
          <h2 class="post-title uppercase">
            duis aute irure dolor in henderit in voluptate.
          </h2>
          <article class="post-text">
            <p>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commo doconsequat, sunt in culpa qui officia
              deserunt mollit anim id est laborum.
            </p>
            <p>
              Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur...
            </p>
          </article>
          <button class="read-more-btn">
            <span class="capitalize">continue Reading</span>
          </button>
        </div>
      </div>
</main>

CSS

img {
  width: 100%;
}

.main-layout {
  max-width: 980px;
  margin-left: 20px;
  margin-right: 20px;
}

.main-content {
  border: solid 2px #e1e0e0;
  gap: 70px;
}

.post {
  padding-top: 10px;
  padding-inline-end: 20px;
}

.post .post-content {
  padding-inline-start: 40px;
  align-items: flex-start;
}

/* HELPERS */

/* Flex */

.flex {
  display: flex;
}

.flex.align-center {
  align-items: center;
}

.flex.space-between {
  justify-content: space-between;
}

.flex.column {
  flex-direction: column;
}

@media (min-width: 860px) {
  .main-layout {
    max-width: 820px;
  }
}

Answer 1

to keep same aspect ratio try adding these two properties

.post-img{
  height: 0;
  padding-top: 100%;
}