I’m trying to put one image over another on my InfoComponent, and I want it to look something like this:

However, I just can’t seem to do it. I need to make it responsive so I have no idea how to make it a one size fits all type scenario, so it just looks like this:

Here’s my code:

<div class="flex items-center justify-center">
  <!--Card-->
  <div
    class="bg-blue-500 mt-12 mx-6 lg:w-[100vh] md:w-[75vh] md:h-[30vh] md:mb-4 rounded-2xl"
  >
    <!-- Flex Container -->
    <div class="flex flex-col md:flex-row rounded-l-xl h-full">
      <!-- Image -->
      <img
        src="implementations.jpeg"
        alt=""
        class="relative object-fit rounded-t-xl h-80 md:w-[31vh] lg:w-[37vh] md:h-full md:rounded-l-xl md:rounded-tr-none opacity-40"
      />
      <img
        src="overlay1.png"
        class="absolute object-fit rounded-t-xl w-[20vh] md:rounded-l-xl md:rounded-tr-none bottom-[-35vh]  md:bottom-[-35vh] lg:bottom-[26vh] xl:bottom-[15vh] left-[25vh] md:ml-14 lg:ml-24"
      />

      <!--Content-->
      <div class="p-6 md:px-8 lg:px-12 lg:mt-3 sh:p-2 sh:px-6">
        <h2
          class="text-xl md:text-2xl lg:text-3xl sh:text-xl font-bold text-center text-white md:text-left"
        >
          Implementations
        </h2>

        <p
          class="max-w-4xl md:max-w-2xl my-4 lg:my-0 lg:mt-4 md:mt-4 sh:mt-2 text-md md:text-md sh:text-sm lg:text-xl leading-5 tracking-wide text-center text-white md:text-left"
        >
          Whether it’s adding a new module to your existing Oracle PeopleSoft
          application or replacing a legacy ERP, we will perform fit-gap
          analysis, write data conversion processes and any other activities you
          need to ensure a successful project.
        </p>
      </div>
    </div>
  </div>
</div>

I’ve tried putting the two images into divs, but that would mess up the width of the first image when on smaller screens. I’ve used different classes, like absolute and relative, used top-0, left-0, etc. How can I get this to work?