Untitled

<!-- ============================================ -->
    <!--                 Side By Side                 -->
    <!-- ============================================ -->
    <section id="sbs">
        <div class="cs-container">
            <!-- Left Image Section -->
            <picture class="cs-left" aria-hidden="true">
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/mountains.jpg">
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/mountains.jpg">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/mountains.jpg" alt="hiker" width="522" height="522">
            </picture>
            <!-- Right Content Section-->
            <div class="cs-right">
                <span class="cs-topper">What’s Next?</span>
                <h2 class="cs-title">Explore the Mountain</h2>
                <p class="cs-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam faucibus purus in. Diam ut venenatis tellus in metus vulputate eu. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
                </p>
                <a class="cs-button-solid" aria-label="learn more about our programs" href="">Learn More</a>
            </div>
        </div>
    </section>

    <!-- ============================================ -->
    <!--             Side By Side Reverse             -->
    <!-- ============================================ -->

    <section id="sbs-r">
        <div class="cs-container">
            <!-- Left Image Section -->
            <picture class="cs-left" aria-hidden="true">
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/mountains.jpg">
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/mountains.jpg">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/mountains.jpg" alt="hiker" width="522" height="522">
            </picture>
            <!-- Right Content Section-->
            <div class="cs-right">
                <span class="cs-topper">What’s Next?</span>
                <h2 class="cs-title">Explore the Mountain</h2>
                <p class="cs-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam faucibus purus in. Diam ut venenatis tellus in metus vulputate eu. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
                </p>
                <a class="cs-button-solid" aria-label="learn more about our programs" href="">Learn More</a>
            </div>
        </div>
    </section>