I'm working on a Next.js component and want to ensure that an image fills the remaining space in a container while maintaining responsiveness. I would also like to leave some space below the image. Here's my current setup:

i guess it can't be responsive if i putted fixed values right?

import Image from "next/image";

export default function Home() {
  return (
    <div>
      <section className="max-h-screen overflow-hidden">
        <Navbar />
        <Filters />
        <div className="relative aspect-[886/1372]">
          <Image src={"/cover1.webp"} alt="cover" fill objectFit="cover" />
        </div>
      </section>
    </div>
  );