The layout is kind of what I'm aiming for however the second paragraph isn't lining up right. the second section should be the exact opposite of the first section; however, the paragraph is to the top left of the image instead of the center. I have tried changing up the html to put the img on the top of the paragraph and on the bottom of the paragraph. I have added to the .content-reverse, but nothing is seaming to work.
.hero { text-align: center; padding: 40px 20px;}/* Hero title */.hero h2 { font-size: 2.5rem; margin-bottom: 40px;}/* Section layout: side by side */.content-section { display: flex; align-items: center; justify-content: center; gap: 40px; margin-bottom: 60px; flex-wrap: wrap;}.content-reverse { flex-direction: row-reverse;}<section class="hero"><h2>Welcome to Learn To Cook</h2><div class="content-section"><div class="hero-image"><img src="https://images.unsplash.com/photo-1528712306091-ed0763094c98? auto=format&fit=crop&q=80&w=600" alt="Cooking in pan"><a href="recipes.html" class="btn">View Our Recipes</a></div><div class="text-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div></section><!-- Second section: reversed (paragraph left, image right) --><section class="content-reverse"><div class="text-content"><p>Jorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div><div class="hero-image"><img src="https://images.unsplash.com/photo-1648161020664-73e6e084ef3a?auto=format&fit=crop&q=80&w=600" alt="Cooking video preview"><a href="videos.html" class="btn">Watch Our Cooking Videos</a></div></section><section>