fix code

[Ecomowner]

anyone know how to fix the code below , I want the collage to look like the image on desktop and on mobile i want the larger image at bottom with the two smaller ones on top side by side

<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
background: #ffffff;
}

.zen-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}

.zen-section {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 60px;
flex-wrap: nowrap;
}

.zen-image {
width: 500px;
height: 500px;
object-fit: cover;
border-radius: 10px;
margin: 10px;
flex-shrink: 0;
}

.zen-text {
width: 100%;
border-radius: 10px;
padding: 20px;
background-color: #ffffff;
margin: 10px;
}

/* Collage Section */
.custom-collage-wrapper {
margin: 60px 0;
text-align: center;
}

.custom-collage-grid {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 20px;
width: 100%;
}

.left-stack {
display: flex;
flex-direction: column;
gap: 20px;
width: 48%;
}

.collage-card {
margin: 0;
padding: 0;
}

.collage-card img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.large-image {
width: 52%;
}

/* Mobile Layout */
@media (max-width: 1024px) {
.zen-section {
flex-direction: column !important;
}

.zen-image,
.zen-text {
width: 100%;
height: auto;
}

.custom-collage-grid {
flex-direction: column;
gap: 20px;
}

.left-stack {
flex-direction: row;
justify-content: space-between;
width: 100%;
}

.collage-card {
width: 48%;
}

.large-image {
width: 100%;
}

.zen-text {
width: 100vw;
margin: 0;
padding: 20px;
}

.zen-image {
width: 90vw;
margin: 20px 0;
}
}
</style>
<div class="zen-container">
<!-- Section: Intro -->
<div class="zen-section">
<div class="zen-text">
<h2 style="text-align: center;">Powerful Support for Joint Health &amp; Inflammation Relief</h2>
<p>Introducing our ZenRoot Pro Supplement, packed with turmeric and powerful curcumin. Known for supporting a healthy inflammatory response, turmeric can help improve joint health and boost antioxidant levels. Research also suggests additional benefits for heart health, brain function, and digestion, making ZenRoot Pro a valuable addition to your wellness routine.</p>
<p>🧠 Supports cognitive function<br>💪 Improves joint flexibility<br>🌿 Enhances gut health and blood flow</p>
</div>
</div>
<!-- Section: Benefits 1 -->
<div class="zen-section">
<img alt="Zen Root Pro" src="https://cdn.shopify.com/s/files/1/0736/4172/2086/files/001vid.gif?v=1745461609" class="zen-image">
<div class="zen-text">
<h3 style="text-align: center;">Feel the Zen: How ZenRoot Pro Supports Your Body</h3>
<p style="text-align: left;"> Experience real relief—soothe sore muscles, aching joints, and move with ease. This powerful formula helps reduce soreness, improve flexibility, and support joint health—so you can feel better every day.</p>
</div>
</div>
<!-- Section: Benefit 2 -->
<div style="flex-direction: row-reverse;" class="zen-section">
<img alt="gif" src="https://cdn.shopify.com/s/files/1/0736/4172/2086/files/001gif_1aeeeac1-e919-4773-a820-d14fb4b54d00.g..." class="zen-image">
<div class="zen-text">
<h3 style="text-align: center;">Backed by Science for Real Joint Pain Relief</h3>
<p style="text-align: left;">Made with <span style="color: rgb(43, 0, 255);"><a rel="noopener" title="Turmeric Article" href="https://pmc.ncbi.nlm.nih.gov/articles/PMC7812094/" target="_blank">scientifically researched ingredients</a><a href="scientifically%20researched%20ingredients," title="Turmeric Article" rel="noopener" target="_blank"></a></span>, ZenRoot Pro targets inflammation at the source. Clinically studied and trusted by professionals—this formula works fast and supports long-term recovery.</p>
</div>
</div>
<!-- Section: Benefit 3 -->
<div class="zen-section">
<img alt="Benefit gif" src="https://cdn.shopify.com/s/files/1/0736/4172/2086/files/001gif_d13fe4ee-3ffa-40fc-8d90-2690e6762efa.g..." class="zen-image">
<div class="zen-text">
<h3 style="text-align: center;">The Turmeric Supplement That Leaves Others Behind</h3>
<p>✔️ <strong>Superior Absorption:</strong> Designed for bioavailability so your body gets what it needs—fast.<br>✔️ <strong>Enhanced with BioPerine®:</strong> Boosts nutrient uptake by up to 2000% for real, lasting effects. <a style="color: #2b00ff;" href="https://pmc.ncbi.nlm.nih.gov/articles/PMC7353321/" target="_blank">Learn more</a><br>✔️ <strong>Faster Results:</strong> Feel relief quicker—without the need for megadoses.</p>
</div>
</div>
<!-- Collage Section -->
<div class="custom-collage-wrapper">
<h1>Why Get ZenRoot Pro</h1>
<div class="custom-collage-grid">
<!-- Left Stack: Two Images Stacked One on Top of the Other -->
<div class="left-stack">
<div class="collage-card"><img src="https://cdn.shopify.com/s/files/1/0736/4172/2086/files/001img_23e4a766-1a93-4a81-b39b-351ff264910a.p..." alt="Image 1"></div>
<div class="collage-card"><img src="https://cdn.shopify.com/s/files/1/0736/4172/2086/files/004img.png?v=1745469706" alt="Image 2"></div>
</div>
<!-- Right Image: Larger Image -->
<div class="collage-card large-image"><img src="https://cdn.shopify.com/s/files/1/0736/4172/2086/files/001img_02c5528a-1ba5-4b15-a444-f9b409f6d2a7.p..." alt="Image 3"></div>
</div>
</div>
</div>

[Ecomowner]

my website is zenfactr.com

[Ecomowner]

Can anyone help 

[tim]

You can look at https://codepen.io/tairli/pen/NPPvWzZ?layout=left for ideas