How to add alternate styles to blocks so that they work in the WordPress admin

alternate-styles.html

<style>
    /* Default styles */
    .section-text {
        color: black;
    }
    .section-image {
        width: 100%;
    }
</style>
<div class="parent-container">
    <div class="main-content-area">
        <div class="section-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="section-image">
            <img src="//via.placeholder.com/700x500?text=Example" alt="Example">
        </div>
    </div>
    <div class="sidebar">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>



<style>
    /* 
     * Please DON'T do this
     *
     * Alternate styles
     * 
     * This is how it was done in a previous project
     * 
     * The alternate section styles will not work in the WordPress block editor as the 
     * 'parent-container` will not be present
     */
    .parent-container--alt .section-text {
        color: red;
    }
    .parent-container--alt .section-image {
        width: 50%;
    }
</style>
<div class="parent-container parent-container--alt"><!-- Note `parent-container--alt` class -->
    <div class="main-content-area">
        <div class="section-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="section-image">
            <img src="//via.placeholder.com/700x500?text=Example" alt="Example">
        </div>
    </div>
    <div class="sidebar">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>



<style>
    /*
     * Please USE THIS method instead. 
     * 
     * Alternate styles
     * 
     * Our preferred method for adding alternate styles to sections
     * 
     * Note that the alternate styles are added directly to the section (block/row).
     * That way the section can be used in the WordPress block editor independent of the
     * parent containers.
     */
    .section-text--alt {
        color: red;
    }
    .section-image-alt {
        width: 50%;
    }
</style>
<div class="parent-container">
    <div class="main-content-area">
        <div class="section-text section-text--alt"><!-- Note `section-text--alt` class -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="section-image section-image--alt"><!-- Note `section-image--alt` class -->
            <img src="//via.placeholder.com/700x500?text=Example" alt="Example">
        </div>
    </div>
    <div class="sidebar">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>