Scale child div based on parent div

<div class="relative w-full rounded-lg overflow-hidden">
        <!-- Background Image -->
        <img class='w-full rounded-lg' src='{{$this->largeCover}}' alt="Background Image">
        <!-- Gradient Overlay -->
        <div class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-b from-transparent to-zinc-800"></div>

        <!-- Overlay Content with the Trailer button above the Summary -->
        <div class="absolute bottom-0 left-0 w-full p-4">
            <!-- Modal Toggle Button -->
            <div class="flex flex-col items-center w-[15rem] mb-8">
                <div class="inline-block w-full h-[22.5rem] overflow-hidden rounded-t-2xl">
                    <img class="w-full h-full object-cover rounded-t-2xl" src="{{$this->record['large_cover_image']}}" alt="" /> <!-- Cover image -->
                </div>
                <button data-modal-target="movieModal" data-modal-toggle="movieModal" class="h-10 w-full bg-green-700 hover:bg-green-800 font-bold">Watch</button>
                <button data-modal-target="trailerModal" data-modal-toggle="trailerModal" class="h-10 w-full rounded-b-2xl bg-red-700 hover:bg-red-800 font-bold">Trailer</button>
            </div>

            <!-- Summary Content -->
            <div class="transition-all duration-700 ease-in-out max-h-32 overflow-hidden hover:max-h-96 bg-black/50 text-white p-4 rounded-lg backdrop-blur-md">
                <div class="text-3xl font-bold">Summary</div>
                @if($this->summary)
                <div>{{$this->summary}}</div>
                @else
                <div class="text-neutral-200 italic">Not provided :(</div>
                @endif
            </div>
        </div>
    </div>