Images shrinking instead of text
I have a div with basically three columns: text, an image and a div with two images. Right now, the div with two images is looking like the first image, they are pretty small. I want them to take up the full height (2nd image) at the cost of the width of the text. I've tried a lot of things, but still couldn't figure it out :) Thanks
(astro & tailwind)
<section
id="about"
class="min-h-svh flex flex-col md:flex-row items-center gap-6 px-4 sm:px-12 py-6 sm:py-7"
>
<div
class="flex flex-col justify-between items-start md:max-h-[calc(100svh-3.5rem)]"
>
<Logo />
<div class="text-orange space-y-7">
<p>
RixtMixt is a premium design label for contemporary, fresh textile
accessories. Crafted by top-tier manufacturers in Italy, every product
is held to the highest standards of quality and sustainability.
</p>
<p>
Backed by years of experience working with Europe's leading high-end
fashion producers, the RixtMixt team is passion- ate about shaping
trends and staying ahead of the curve in the ever-evolving world of
fashion.
</p>
<p>RixtMixt is powered by Little Black Buzzer.</p>
</div>
<Image
src={certificates}
alt="Certificates"
class="h-full w-auto object-contain"
/>
</div>
<div class="flex flex-col lg:flex-row gap-6 md:max-h-[calc(100svh-3.5rem)]">
<div class="h-[calc(100svh-3.5rem)]">
<Image
src={factory}
alt="Factory"
class="sm:max-h-[calc(100svh-3.5rem)] object-contain w-fit"
/>
</div>
<div class="flex flex-col justify-between">
<Image
src={socks1}
alt="Socks 1"
class="w-fit max-h-[calc(50%-1rem)] object-contain"
/>
<Image
src={socks2}
alt="Socks 2"
class="w-fit max-h-[calc(50%-1rem)] object-contain"
/>
</div>
</div>
</section>
(astro & tailwind)
