<div class="reading-typography">
    <!-- STARRT: Content -->
        <p>Content Goes here </p>
    <!-- END: Content -->
    <!-- STARRT: Related References -->
        <h3>Related References:</h3>
        <ol class="marker_primary">
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
        </ol>    <!-- END: Related References -->
    <!-- START: Twitter List -->
        <h3>Twitter Links:</h3>
        <ul class="br-t_1 br_black-2 br_solid max-w_65 ul_none font_0">
        <!-- START: Twitter Link: Duplicate as needed -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_white c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END: Twitter Link -->
        <!-- DELETE ME -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_white c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END DELETE ME -->
        </ul>    <!-- END: Twitter List -->
    <!-- START: Player -->
        <div class="bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light">
            <audio class="w_100" controls="">
                <source src="http://traffic.libsyn.com/accelaccorg/00000000.mp3" type="audio/mp3">
                <p>Your browser doesn't support HTML5 audio. Here is a <a class="link" target="_blank" href="http://traffic.libsyn.com/accelaccorg/00000000.mp3">link to the audio</a> instead.</p>
            </audio>
            <div class="grid items_center justify_center">
                <a href="/Latest-in-Cardiology/Features/Podcasts" class="btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light">Subscribe
                    to the ACCEL Lite Podcast</a>
            </div>
        </div>   <!-- END: Player -->
</div>

<div class="reading-typography">
    <!-- STARRT: Content -->
        <p>Content Goes here </p>
    <!-- END: Content -->
    <!-- STARRT: Related References -->
        <h3>Related References:</h3>
        <ol class="marker_primary">
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
            <li>0000000000000000000000</li>
        </ol>    <!-- END: Related References -->
    <!-- START: Twitter List -->
        <h3>Twitter Links:</h3>
        <ul class="br-t_1 br_black-2 br_solid max-w_65 ul_none font_0">
        <!-- START: Twitter Link: Duplicate as needed -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_white c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END: Twitter Link -->
        <!-- DELETE ME -->
            <li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
                <span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
                <span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
                    <a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_white c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                        <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
                        <i class="fa-at fas opacity_8 p-r_1"></i>
                        Tweat_DrSoda
                    </a>        </span>
            </li>
        <!-- END DELETE ME -->
        </ul>    <!-- END: Twitter List -->
    <!-- START: Player -->
        <div class="bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light">
            <audio class="w_100" controls="">
                <source src="http://traffic.libsyn.com/accelaccorg/00000000.mp3" type="audio/mp3">
                <p>Your browser doesn't support HTML5 audio. Here is a <a class="link" target="_blank" href="http://traffic.libsyn.com/accelaccorg/00000000.mp3">link to the audio</a> instead.</p>
            </audio>
            <div class="grid items_center justify_center">
                <a href="/Latest-in-Cardiology/Features/Podcasts" class="btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light">Subscribe
                    to the ACCEL Lite Podcast</a>
            </div>
        </div>   <!-- END: Player -->
</div>

<div>
    <ul class="columns_1 font_0 font_copy gap_3 gap_4:md gap_5:lg grid ul_none">
        <li data-element="data-table" class="bg_primary-n2 br_round relative flex flex_column c_white c_white-8 color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light font-size_up"
            style="--custom-font-size-up: 1;">
            <header class="font_display font_4 lh_0 m-t_n3">
                <span data-element="table-title" class="font-size_down-2 font_medium m-b_0 c_inherit">
                </span>
                <h3 class="font-size_up-2 lh_2 m_0 c_inherit">
                    <span class="font_bold"><em class="fas fa-usd" aria-hidden="true"></em>30</span>
                    <span>Application Fee</span>
                </h3>
            </header>
        </li>
    </ul>
    <ul class="columns_1 columns_2:md font_0 font_copy gap_3 gap_4:md gap_5:lg grid ul_none">
        <li data-element="data-table" class="bg_primary-n2 br_round c_white c_white-8 color_inherit flex flex_column font-size_down-1 font-size_up inherit_all p_4 p_5:md reading-typography relative shadow_bevel-light"
            style="--custom-font-size-up: 1;">
            <header class="font_display font_4 lh_0 m-t_n3">
                <span data-element="table-title" class="font-size_down-2 font_medium m-b_0 c_inherit">
                    Member Price
                </span>
                <h3 class="c_inherit font-size_up-2 m_0">Exam Registration</h3>
                <h4 class="c_inherit font-size_up-1 lh_2 m_0">
                    <span class="font_bold"><em class="fas fa-usd" aria-hidden="true"></em>299</span>
                    <span>/ Total</span>
                </h4>
            </header>
            <footer class="m-t_4 m-t_auto:md">
            </footer>
        </li>
        <li data-element="data-table"
            class="br_round relative flex flex_column bg_white p_5:md  p_4 shadow_bevel-light bg_white reading-typography font-size_up c_primary-n2"
            style="--custom-font-size-up: 1;">
            <header class="font_4 font_display lh_0 m-t_n3">
                <span data-element="table-title" class="font-size_down-2 font_medium m-b_0 c_inherit">
                    Non-Member Price
                </span>
                <h3 class="c_inherit font-size_up-2 m_0">Exam Registration</h3>
                <h4 class="font-size_up-2 lh_2 m_0 c_inherit">
                    <span class="font_bold"><em class="fas fa-usd" aria-hidden="true"></em>399</span>
                    <span>/ Total</span>
                </h4>
            </header>
            <footer class="m-t_4 m-t_auto:lg">
            </footer>
        </li>
    </ul>
</div>

<div class="columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid reading-typography">
    <div item-label="content" class="wrapper-container">
        <div class="p_4 br_radius bg_black-1">
            <h3>Who Can Apply</h3>
            <p>Applicants must:</p>
            <ul>
                <li>Be ACC members in good standing</li>
                <li>Be enrolled in a U.S.-accredited medical school, residency, or cardiology fellowship</li>
                <li>Be committed to a cardiovascular career path</li>
                <li>Demonstrate financial hardship due to emergency, health, or other unforeseen event or circumstances.
                </li>
            </ul>
            <p>Note: International trainees enrolled in U.S.-based programs are eligible.</p>
        </div>
    </div>
    <div item-label="content" class="wrapper-container">
        <div class="p_4 br_radius bg_black-1 m-b_4">
            <h3>What Awardees Receive</h3>
            <p>A one-time grant of up to $1,500, awarded based on need and available funds.</p>
        </div>
        <div class="p_4 br_radius bg_black-1">
            <h3>What the Fund Does Not Cover</h3>
            <ul>
                <li>Travel for conferences or professional development</li>
                <li>Tuition or academic fees</li>
                <li>Study materials or equipment (e.g., laptops, subscriptions)</li>
            </ul>
            <p>Requests to support professional or school/training related expenses <strong>will not</strong> be
                forwarded
                to the review &amp; evaluation committee.</p>
        </div>
    </div>
</div>

<div class="grid columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
    <div data-area="card" class="br_solid br_black-3 br_1 br_radius p_4 flex flex_column gap_3 bg_white shadow_bevel-bold relative">
        <header class="aspect_5x1 bg_black-2 grid items_center justify_center m-b_4 m-t_n4 m-x_n4 overflow-clip w_auto">
            <img alt="New science and guidelines" lazy-load="true" class="absolute inset_0 w_100" src="https://placeholder.pics/svg/500x100/0ccda3-1db0f0/343e42">
        </header>
        <main class="m_auto">
            <h3 class="">
                Rerum libg dero pariatur (40&nbsp;Characters)            <small class="block font-size_down-1 font_medium m-t_3">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</small>
            </h3>
            <p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>
        </main>
        <footer class="flex flex_row justify_start gap_3 m-t_auto m_auto">
            <button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button>    </footer>
    </div>    <div data-area="card" class="br_solid br_black-3 br_1 br_radius p_4 flex flex_column gap_3 bg_white shadow_bevel-bold relative">
        <header class="aspect_5x1 bg_black-2 grid items_center justify_center m-b_4 m-t_n4 m-x_n4 overflow-clip w_auto">
            <img alt="New science and guidelines" lazy-load="true" class="absolute inset_0 w_100" src="https://placeholder.pics/svg/500x100/0ccda3-1db0f0/343e42">
        </header>
        <main class="m_auto">
            <h3 class="">
                Rerum libg dero pariatur (40&nbsp;Characters)            <small class="block font-size_down-1 font_medium m-t_3">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</small>
            </h3>
            <p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>
        </main>
        <footer class="flex flex_row justify_start gap_3 m-t_auto m_auto">
            <button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button>    </footer>
    </div>    <div data-area="card" class="br_solid br_black-3 br_1 br_radius p_4 flex flex_column gap_3 bg_white shadow_bevel-bold relative">
        <header class="aspect_5x1 bg_black-2 grid items_center justify_center m-b_4 m-t_n4 m-x_n4 overflow-clip w_auto">
            <img alt="New science and guidelines" lazy-load="true" class="absolute inset_0 w_100" src="https://placeholder.pics/svg/500x100/0ccda3-1db0f0/343e42">
        </header>
        <main class="m_auto">
            <h3 class="">
                Rerum libg dero pariatur (40&nbsp;Characters)            <small class="block font-size_down-1 font_medium m-t_3">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</small>
            </h3>
            <p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>
        </main>
        <footer class="flex flex_row justify_start gap_3 m-t_auto m_auto">
            <button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button>    </footer>
    </div></div>

<a href="" class="bg_black-3 br_none br_radius c_black-7 cursor_not-allowed disabled font_1 font_2:md font_medium h:bg_black-3 h:c_black-7 h:undecorated undecorated inline-block m-t_0:md m-t_3 opacity_5 p-x_4 p-y_3 shadow_emboss-light text_center w_100 w_auto:md">Coming Soon</a>

<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>

<div class="br-b_1 br_black-8 lh_2 br_solid  p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
    <a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
    <i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
</div>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-book-medical p-r_3"></i>
    Guidelines & Policies
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-book-reader p-r_3"></i>
    Self-paced Learning
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-clipboard-user p-r_3"></i>
    Resources
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-desktop-alt p-r_3"></i>
    Webinars
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-file-chart-pie p-r_3"></i>
    Infographics
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-file-medical-alt p-r_3"></i>
    Articles
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-images p-r_3"></i>
    Images
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-microscope p-r_3"></i>
    Clinical Trials
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-newspaper p-r_3"></i>
    Articles and Abstracts
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-notes-medical p-r_3"></i>
    Patient Case Quizzes
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <span class="fa-stack font_n2">
       	<i class="fa-rectangle-landscape fas fa-stack-2x"></i>
<i style="font-size:80%" class="fa-play-circle fas c_white fa-stack-1x"></i>
    </span>
    On Demand
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-podcast p-r_3"></i>
    Podcasts
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-stars p-r_3"></i>
    Featured
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <span class="fa-stack font_n2">
        <i class="fa-box fa fa-stack-2x"></i>
        <i style="top: 22%;font-size: 75%;" class="fa-tools fas c_white fa-stack-1x"></i>
    </span>
    Clinical Toolkit
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-user-chart p-r_3"></i>
    Expert Consensus
</h1>

<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
    <i class="far fa-users-class p-r_3"></i>
    Expert Panel Discussions
</h1>

<div class="flex flex_column flex_row:md gap-x_4 max-w_70">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
    <span class="fa-stack m-x_2 m-y_3">
        <i class="fa-notes-medical far fa-stack-2x text-shadow_black-1"></i>
    </span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
    <div class="c_primary-n2 font_5 font_display">Patient Case Quizzes</div>
    <p class="lh_2 font_1 p-b_3">Test your knowledge and sharpen your diagnostic skills to bring appropriate treatment to your patients sooner.</p>
    <section class="br_1 br_solid br_primary br-r_0 br-l_0 font_0">
        <div class="br-b_1 br_black-8 lh_2 br_solid  p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
            <a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
            <i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
        </div>        <div class="br-b_1 br_black-8 lh_2 br_solid  p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
            <a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
            <i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
        </div>    </section>
</main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-book-medical fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Guidelines & Policies</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-book-reader fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Self-paced Learning</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3">
    <i class="fa-certificate fa-stack-2x fas text-shadow_black-1"></i>
    <i style="font-size:85%" class="c_white fa-book-reader fa-stack-1x fas text-shadow_black-n1"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
    <div class="c_primary-n2 font_5 font_display">Certified Education</div>
    <p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
    <section>
         <a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
    </section>
</main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-clipboard-user fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Resources</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-desktop-alt fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Webinars</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-file-chart-pie fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Infographics</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-file-medical-alt fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Articles</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-images fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Images</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-microscope fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Clinical Trials</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-newspaper fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Articles and Abstracts</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-notes-medical fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Patient Case Quizzes</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
    <span class="fa-stack m-x_2 m-y_3">
        <i class="fa-rectangle-wide fas c_acc fa-stack-2x text-shadow_black-1 "></i>
        <i style="font-size:80%" class="fa-play-circle fas c_white fa-stack-1x"></i>
    </span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
    <div class="c_primary-n2 font_5 font_display">On Demand</div>
    <p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
     <section>
        <a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
     </section>
</main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-podcast fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Podcasts</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-stars fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Featured</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
    <span class="fa-stack m-x_2 m-y_3">
        <i class="fa-box fa fa-stack-2x text-shadow_black-1"></i>
        <i style="top: 22%;font-size: 75%;" class="c_acc-4 fa-stack-1x fa-tools fas"></i>
    </span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
    <div class="c_primary-n2 font_5 font_display">Clinical Toolkit</div>
    <p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
     <section>
        <a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
     </section>
</main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-user-chart fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Expert Consensus</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<div class="flex flex_column flex_row:md gap-x_4 ">
    <aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
    <i class="fa fa-users-class fa-stack-2x"></i>
</span>
    </aside>
    <main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Expert Panel Discussions</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
    </main>
</div>

<li class="wrapper-container bg_white m_0 p_2 br_1 br_black-3 br_round br_solid grid columns_2 gap_0 items_start justify_start shadow_overlap-light">
  <div class="p_3 p-b_0 p_4:md p-r_0:sm p_3:sm grid items_center justify_center col_all col-end_n2:sm"><img
    class="aspect_1x1 w_100 aspect_8x10:sm bg_cover br_radius max-w_20 br_1 br_solid br_black-2"
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/></div>
  <div class="col-start_n2:sm col_all font_0:sm font_1:md font_2:lg font_n1:xs font_n2 lh_2 p-x_4:md p-y_4:md p-y_4:sm p_3">
    <span class="font_display font-size_up-1 c_secondary-n2 lh_1">Pepper H. Soda III, MD, FACC</span>
    <strong class="block font-size_down-1 c_primary font_meduim font_ui">Chair</strong>
  </div>
</li>

<ul class="columns_1 columns_2:md columns_3:lg gap_4:md gap_3 grid justify_center ul_none wrapper-container">
<li class="wrapper-container bg_white m_0 p_2 br_1 br_black-3 br_round br_solid grid columns_2 gap_0 items_start justify_start shadow_overlap-light">
  <div class="p_3 p-b_0 p_4:md p-r_0:sm p_3:sm grid items_center justify_center col_all col-end_n2:sm"><img
    class="aspect_1x1 w_100 aspect_8x10:sm bg_cover br_radius max-w_20 br_1 br_solid br_black-2"
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/></div>
  <div class="col-start_n2:sm col_all font_0:sm font_1:md font_2:lg font_n1:xs font_n2 lh_2 p-x_4:md p-y_4:md p-y_4:sm p_3">
    <span class="font_display font-size_up-1 c_secondary-n2 lh_1">Pepper H. Soda III, MD, FACC</span>
    <strong class="block font-size_down-1 c_primary font_meduim font_ui">Chair</strong>
  </div>
</li><li class="wrapper-container bg_white m_0 p_2 br_1 br_black-3 br_round br_solid grid columns_2 gap_0 items_start justify_start shadow_overlap-light">
  <div class="p_3 p-b_0 p_4:md p-r_0:sm p_3:sm grid items_center justify_center col_all col-end_n2:sm"><img
    class="aspect_1x1 w_100 aspect_8x10:sm bg_cover br_radius max-w_20 br_1 br_solid br_black-2"
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/></div>
  <div class="col-start_n2:sm col_all font_0:sm font_1:md font_2:lg font_n1:xs font_n2 lh_2 p-x_4:md p-y_4:md p-y_4:sm p_3">
    <span class="font_display font-size_up-1 c_secondary-n2 lh_1">Pepper H. Soda III, MD, FACC</span>
    <strong class="block font-size_down-1 c_primary font_meduim font_ui">Chair</strong>
  </div>
</li><li class="wrapper-container bg_white m_0 p_2 br_1 br_black-3 br_round br_solid grid columns_2 gap_0 items_start justify_start shadow_overlap-light">
  <div class="p_3 p-b_0 p_4:md p-r_0:sm p_3:sm grid items_center justify_center col_all col-end_n2:sm"><img
    class="aspect_1x1 w_100 aspect_8x10:sm bg_cover br_radius max-w_20 br_1 br_solid br_black-2"
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/></div>
  <div class="col-start_n2:sm col_all font_0:sm font_1:md font_2:lg font_n1:xs font_n2 lh_2 p-x_4:md p-y_4:md p-y_4:sm p_3">
    <span class="font_display font-size_up-1 c_secondary-n2 lh_1">Pepper H. Soda III, MD, FACC</span>
    <strong class="block font-size_down-1 c_primary font_meduim font_ui">Chair</strong>
  </div>
</li>
</ul>

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Icon and Header with Link</h2>
    <ul class="columns_2:md columns_3:lg columns_1 gap-x_5:lg gap-x_4:md gap-x_3 gap-y_4 grid p-x_4:lg p-x_3:md p-x_0 ul_none">
        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>    </ul>
</div>

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Highlighted Grouped List with Category Icon and Header</h2>
    <ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
        <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius">
             <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
           <div class="font-size_up">
            <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                Distinctio et Consequatur
            </div>
                <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
                    <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
                    <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
                    <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
                    <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
                  </ul>
            </div>
        </li>        <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius">
             <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
           <div class="font-size_up">
            <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                Distinctio et Consequatur
            </div>
                <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
                    <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
                    <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
                    <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
                    <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
                  </ul>
            </div>
        </li>        <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius">
             <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
           <div class="font-size_up">
            <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                Distinctio et Consequatur
            </div>
                <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
                    <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
                    <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
                    <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
                    <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
                  </ul>
            </div>
        </li>    </ul>
</div>

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Highlighted Content with Icon, Header, and Description. Links in descriptions optional</h2>
    <div class="wrapper-container">
        <ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-gears" aria-hidden="true"></i>
                <div class="font-size_up text_center text_left:md">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                       nihil amet distinctio
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        <strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</strong>.
                    </span>
                </div>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-graduation-cap" aria-hidden="true"></i>
                <div class="font-size_up text_center text_left:md">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt <a class="expanded-click-area-beforeAlt link" href="#">Action Link</a></strong>.
                    </span>
                </div>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-gears" aria-hidden="true"></i>
                <div class="font-size_up text_center text_left:md">
                    <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                       nihil amet distinctio
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        <strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</strong>.
                    </span>
                </div>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius">
                <span class="fa-stack font_6 order_2 z_1">
                        <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
                        <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
                </span>    <div class="font-size_up text_center text_left:md order_1 z_2">
                    <strong class="block font_bold font_display c_inherit-all lh_2 m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Read More
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        about our <a class="expanded-click-area-beforeAlt" href="#">Member Benefits</a>.
                    </span>
                </div>
            </li>       </ul>
    </div>
</div>

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
    <h2>Linked Highlighted Content with Icon, Header, and Description. Links in descriptions optional</h2>
    <div class="wrapper-container">
        <ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>            <li class="flex flex_row:md flex_column items_start:md items_center justify_start isolation_isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
                <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap" aria-hidden="true"></i>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
                        Pass Your Boards with Confidence
                    </strong>
                    <span class="block font-size_down opacity_8 c_black" >
                        <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
                    </span>
                </a>
            </li>        </ul>
    </div>
</div>

<aside class="columns_1 grid isolation_isolate rows_3 m-y_5:lg m-t_4 max-w_30 m_auto p-x_4" style="--row-1:90px; --row-2:90px;">
    <div data-label="background" class="bg_accent-5 row-end_end row-start_2 col_all flex shadow_bevel-light br_solid br_1 br_accent-4" style="border-radius: 16px;"></div>
    <div data-label="product-image" class="row_all col_all grid">
        <div class="bg_contain bg_no-repeat m-t_n3" style="background-image: url( 'https://www.acc.org/~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/Learn-Mobile.png' ); background-position: center top;"></div>
    </div>
    <div data-label="content-container" class="bg_white br_radius m_3 p_4 reading-typography row-end_end row-start_n2 shadow_overlap-light z_2 col_all br_solid br_black-2 br_1">
        <h4 class="font_xbold text_center font_4:lg font_3">Learn on the Go!</h4>
        <p class="text_center">Access you SAPs from anywhere on the mobile app ACC Learn.</p>
        <div class="grid columns_2 content_center gap_2 justify_center">
            <a class="bg_black br_radius ga-external" href="https://apps.apple.com/us/app/acc-learn/id1497013017" target="_blank"><img src="https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/appstore.svg" alt="Download on the App Store"></a>
            <a class="bg_black br_radius ga-external" href="https://play.google.com/store/apps/details?id=org.acc.learn.android&amp;hl=en_US&amp;pli=1" target="_blank"><img src="https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/googleplay.svg" alt="Get it on Google Play"></a>
        </div>
        <div class="text_center m-t_3 m-b_n2"><a href="https://www.acc.org//-/media/Non-Clinical/Files-PDFs-Excel-MS-Word-etc/2020/10/01/G20147-ACC-Lifelong-Learning-App-Info-Sheet.pdf" target="_blank"><small>Learn
                    More</small></a></div>
    </div>
</aside>

<div data-type="card" class="bg_acc br_rounder br-tr_radius br-tl_radius c_white color_inherit flex flex_column gap_3 reading-typography relative shadow_bevel-bold text_center">
    <header class="aspect_21x9 overflow_clip br-tr_radius br-tl_radius">
        <img src="https://www.acc.org//-/media/Non-Clinical/HeroImages/CMP/G25028-CMP-UX-Webpage-Graphics_455x195-V2A" alt="Branding for the Annual Report" width="100%" height="100%">
    </header>
    <div label="content" class="p_4 p_5:lg">
    <h3 class="m-b_0">Rerum libg dero pariatur (40&nbsp;Characters)</h3>
    <p>
        Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    </div>
    <div class="flex flex_row gap_4 justify_around m-b_4 m-b_5:lg m-t_auto m-x_auto p-b_3 p-x_4 w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-primary wrap">btn-primary wrap</button>        <button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button>    </div>
</div>

<div data-type="card" class="bg_white br-tr_radius br-tl_radius br_rounder flex flex_column gap_3 reading-typography relative shadow_bevel-bold text_center">
    <header class="aspect_21x9 overflow_clip br-tr_radius br-tl_radius">
        <img src="https://www.acc.org//-/media/Non-Clinical/HeroImages/CMP/G25028-CMP-UX-Webpage-Graphics_455x195-V2A" alt="Branding for the Annual Report" width="100%" height="100%">
    </header>
    <div label="content" class="p_4 p_5:lg">
    <h3 class="m-b_0">Rerum libg dero pariatur (40&nbsp;Characters)</h3>
    <p>
        Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    </div>
    <div class="flex flex_row gap_4 justify_around m-b_4 m-b_5:lg m-t_auto m-x_auto p-b_3 p-x_4 w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-primary">btn-primary</button>        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>

<div data-item="cta-overlay"
    class="bg_primary-n2 c_white color_inherit br_round shadow_overlap-light p_4 p_5:lg reading-typography relative z_1">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">Membership Quick-links</strong>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
        <p class="font-size_up">
        </p>
        <ul class="ul_none">
            <li class="relative isolation_isolate">
                <a class="expanded-click-area" href="https://www.acc.org/my-acc/my-membership">Renew or Join Sections</a>
                <p>Pay your annual dues or join a Member Section in the renewal portal.</p>
            </li>
            <li class="relative isolation_isolate">
                <a class="expanded-click-area" href="https://federated.acc.org/ACCFederatedlogin/PostSP?SP=https://www.docmatter.com/dm/auth/acc&amp;_ga=2.94361949.1390219747.1721069291-1638134164.1669745868">DocMatter</a>
                <p>Connect with your community, ask clinical questions and more in ACC’s members-only collaboration portal.</p>
            </li>
            <li class="relative isolation_isolate">
                <a class="expanded-click-area" href="https://tools.acc.org/ACCConnect/">Member Directory</a>
                <p>Search ACC members by name, location or clinical focus.</p>
            </li>
        </ul>
    </div>
</div>

<div data-area="card" class="br_solid br_black-3 br_1 br_radius p_4 flex flex_column gap_3 bg_white shadow_bevel-bold relative">
    <header class="aspect_5x1 bg_black-2 grid items_center justify_center m-b_4 m-t_n4 m-x_n4 overflow-clip w_auto">
        <img alt="New science and guidelines" lazy-load="true" class="absolute inset_0 w_100" src="https://placeholder.pics/svg/500x100/0ccda3-1db0f0/343e42">
    </header>
    <main class="m_auto">
        <h3 class="">
            Rerum libg dero pariatur (40&nbsp;Characters)            <small class="block font-size_down-1 font_medium m-t_3">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</small>
        </h3>
        <p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>
    </main>
    <footer class="flex flex_row justify_start gap_3 m-t_auto m_auto">
        <button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button>    </footer>
</div>

<div data-type="card" class="br_solid br_black-3 br_1 br_round flex flex_column bg_white shadow_overlap-light wrapper-container">
    <div label="content" class="p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md">
        <h3>Commodi dolores (30&nbsp;Characters)
            <small class="block font-size_down-2 font_medium m-t_3"> Rerum libg dero pariatur (40&nbsp;Characters)</small>
        </h3>
        <p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>
    </div>
    <div class="flex flex_row gap_3 justify_around m-t_auto m-x_auto p-b_4 p-b_5:md p-x_3 p-x_4:sm p-x_5:md w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>

<div  data-type="card" class="br_solid br_black-3 br_1 br_round flex flex_column bg_white shadow_overlap-light wrapper-container">
    <div label="content" class="p-x_3 p-x_4:md p-x_5:lg p-t_3 p-t_4:md p-t_5:lg">
        <img src="https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42" class="br_radius" />
    </div>
    <div label="content" class="p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md">
        <h3>Rerum libg dero pariatur (40&nbsp;Characters)
        </h3>
        <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
    </div>
    <div class="flex flex_row gap_3 justify_around m-t_auto m-x_auto p-b_4 p-b_5:md p-x_3 p-x_4:sm p-x_5:md w_auto">
        <button class="btn capitalize wrap wrap_balanced btn-secondary">btn-secondary</button>    </div>
</div>

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md " style="--custom-font-size-up: 1;">
  <div data-item="cta" class=" font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
    <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
      <p class="font-size_up wrap_balance">
      Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)      </p>
    </div>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary btn-lg expanded-click-area">btn-primary btn-lg expanded-click-area</button>    </div>
  </div>
</div>

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md bg_black-2 p_4 p-y_5:md p-y_6:lg "
  style="--custom-font-size-up: 1;">
  <div data-item="cta"
    class="shadow_bevel-light p_4 p_5:lg bg_white br_round font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="p-t_2 p-b_3" data-item="cta-description">
      <p class="font-size_up wrap_balance">Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>
    </div>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

<div label="CTA_follow_up" class="reading-typography font-size_up p_4 p_5:md p_4 p-y_5:md p-y_6:lg "
  style="--custom-font-size-up: 1;">
  <div data-item="cta"
    class="p_4 p-t_6 p-x_5:lg bg_white br-t_1 br_solid br_primary-1 font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative">
    <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display">
        <strong class="font-size_up m-b_2 block">
        Commodi dolores (30&nbsp;Characters)        </strong>
        <small class="font-size_down block">
        Rerum libg dero pariatur (40&nbsp;Characters)        </small>
    </h2>
    <div class="grid justify_center">
        <button class="btn capitalize wrap wrap_balanced btn-primary expanded-click-area">btn-primary expanded-click-area</button>    </div>
  </div>
</div>

<div label="split-panel" class="bg_black-1 columns_1 columns_2:md gap_4 gap_5:md grid m-b_4 m-b_5:lg m-x_n4 p_4 p_5:md ">
    <div class="grid items_center:lg items_start justify_center">
        <img src="https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42" alt="Fill me in!" class="w_100 aspect_3x2 ">
    </div>
  <div class="font_n1 font_0:lg flex_column flex gap_4">
    <div zone-label="main-content" class="">
        <h3 class="m-t_0">Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)</h3>
        <p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>    </div>
    <footer class="flex flex_row m-t_auto c_accent-n2">
      <div class="flex_auto grid items_center justify_end m-l_auto max-w_25  self_center text_right"><a href="https://www.acc.org/About-ACC/Diversity-and-Inclusion" class="link">Panel's Call to Action</a></div>
      <span class="fa-stack font_6 order_2 z_1">
              <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
              <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
      </span>  </footer>
  </div>
</div>

<div label="split-panel" class="bg_black-1 columns_1 columns_2:md gap_4 gap_5:md grid m-b_4 m-b_5:lg m-x_n4 p_4 p_5:md ">
    <div class="grid items_center:lg items_start justify_center order_1 order_2:lg">
        <img src="https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42" alt="Fill me in!" class="w_100 aspect_3x2 ">
    </div>
    <div class="font_n1 font_0:lg flex_column flex gap_4 order_1:lg order_2">
      <div zone-label="main-content" class="">
        <h3 class="m-t_0">Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)</h3>
        <p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)</p>
      </div>
      <footer class="flex flex_row m-t_auto c_accent-n2">
        <div class="flex_auto grid items_center justify_end m-l_auto max-w_25  self_center text_right"><a href="https://www.acc.org/About-ACC/Diversity-and-Inclusion" class="link">Panel's Call to Action</a></div>
        <span class="fa-stack font_6 order_2 z_1">
                <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
                <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
        </span>    </footer>
    </div>
</div>

<div label="CTA-Callout" class="bg_black-1 br_radius columns_1 columns_2:lg block grid:lg m-x_0:lg m-x_auto m-y_4 m-y_5:lg max-w_25 max-w_unset:lg reading-typography" style=" --col-1:min(100%, 375px); --col-2:1fr; -row-1:250px;">
    <!-- Image Section -->
    <div grid-label="image" class="col-end_2:lg col_all">
        <img src="https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42" alt="Voluptas dolorem unde" class="w_100 ">
    </div>
    <!-- Content Section -->
    <div grid-label="content-container" class="col-start_2:lg col_all columns_1 grid p-t_3 p-b_4 p-y_4:md" style="--col-1: 1fr;">
        <div grid-label="content" class="m_auto max-w_40 p-x_4">
            <h4 class="c_black font_accent lh_1 m-b_4 wrap_balance">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</h4>
            <p class="lh_2 wrap_pretty">Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <button class="btn capitalize wrap wrap_balanced btn-shade btn-sm float_right">btn-shade btn-sm float_right</button>        </div>
    </div>
</div>

<div label="CTA-Callout" class="bg_black-1 br_radius columns_1 columns_2:lg block grid:lg m-x_0:lg m-x_auto m-y_4 m-y_5:lg max-w_25 max-w_unset:lg reading-typography" style=" --col-2:min(100%, 375px); --col-1:1fr; -row-1:250px;">
    <!-- Image Section -->
    <div grid-label="image" class="col-start_2:lg col_all row-start_1">
        <img src="https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42" alt="Voluptas dolorem unde" class="w_100 ">
    </div>
    <!-- Content Section -->
    <div grid-label="content-container" class="row-start_1 col-end_2:lg col_all columns_1 grid p-t_3 p-b_4 p-y_4:md" style="--col-1: 1fr;">
        <div grid-label="content" class="m_auto max-w_40 p-x_4">
            <h4 class="c_black font_accent lh_1 m-b_4 wrap_balance">Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)</h4>
            <p class="lh_2 wrap_pretty">Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <button class="btn capitalize wrap wrap_balanced btn-shade btn-sm float_right">btn-shade btn-sm float_right</button>        </div>
    </div>
</div>

<div class="columns_1 font_1 font_2:md font_3:lg grid isolation_isolate m-b_5 m-x_n4:lg min-h_20 overflow_hidden relative rows_1">
  <div class="col_all row_all ">
    <picture class="bg_cover flex flex_column inset_0 absolute">
      <source srcset="https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42" media="(min-width: 1024px)" class="display_none">
      <source srcset="https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42" media="(min-width: 768px)" class="display_none">
      <source srcset="https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42" media="(min-width: 400px)" class="display_none">
      <img src="https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42" alt="Hero Image" class="bg_cover flex_100">
    </picture>
  </div>
  <div class="col_all columns_1 font-size_up-2 grid inset_0 items_center justify_start p-y_3 p-y_4:md p-y_5:lg row_all self_center">
    <h1 class="c_white font-size_up-2 isolation_isolate lh_1 m_0 relative self_center">
      <span class="inline-block p-x_4 p-y_3 bg_acc-n3" style="box-decoration-break: clone;"><strong class="font_xbold c_special" >ProductName</strong>SAP</span><br>
      <span class="text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3 p-x_4" style="box-decoration-break: clone;">Product Description</span>
    </h1>
  </div>
</div>

<div label="split-panel" class="bg_primary-5 br_radius columns_1 columns_2:md gap_4 gap_5:md grid m-t_4 m-x_n4 p_4 p_5:md relative">
  <div class="col-end_2:md col_all columns_1 grid isolation_isolate overflow_hidden relative rows_1">
    <picture class="col_all row_all bg_cover flex flex_column inset_0 absolute">
      <source srcset="https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42" media="(min-width: 400px)" class="display_none">
      <img src="https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42" alt="Hero Image" loading="lazy" class="bg_cover flex_100">
    </picture>
    <div class="b_3 col_all font-size_up-2 grid inset_0 justify_start m-y_4 relative row_all self_center">
      <h2 class="font-size_up-2 lh_1 m_0 c_white isolation_isolate relative">
        <span class="inline-block p-x_4 p-y_3 bg_acc-n3 box-decoration_clone"><strong class="font_xbold c_special">ProductName</strong>SAP</span><br>
        <span class="text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3 box-decoration_clone">Product Description</span>
      </h2>
    </div>
  </div>
  <div class="font_n1 font_0:lg flex_column flex gap_4">
    <div zone-label="main-content" class="p-y_4">
      <h2 data-item="cta-title" class="m-b_3 lh_1 font_medium font_display"><strong class="font-size_up m-b_2 block">Ready to Take the Next Step?</strong></h2>
      <p class="font-size_up lh_3">Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
      <button class="btn btn-primary btn-lg capitalize">Purchase</button>    </div>
  </div>
</div>

<h2 class="c_primary-n1 flex flex_column flex_row:md font_display font_medium m_0 p-y_5:md p-y_4">
  <span class="flex_auto flex_shrink grid">
    <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
  </span>
  <span class="flex_50 flex_grow lh_1 p-x_4 p-x_5:lg text_center">asdf fasdfa sd asdf s adffas dfsdasdf
    Need Help
  </span>
  <span class="flex_auto flex_shrink grid">
    <span class="br_primary-1 br-tl_radius br-t_1 br_solid br_inherit self_center"></span>
  </span>
</h2>

<ul class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
    <li data-element="data-table" class="flex flex_column justify_start font_0 font_copy br_round bg_white p_5:md p_4  shadow_bevel-light default">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Basic</h2>
            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_black">$39</span><span>/Month</span></h3>
        </header>
        <main>
            <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_black-9">
                <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Quality-focused</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Phased</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary"></i> Automated</li>
                <li><i class="fas fa-times-circle m-r_2 c_alert-n2"></i> Cross-platform</li>
            </ul>
        </main>
        <footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn-primary  h:undecorated">Choose Plan</a></footer>
    </li>    <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_primary-n2">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">primary</h2>
            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</span><span>/Month</span></h3>
        </header>
        <main>
            <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9">
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>primary</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Automated</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Cross-platform</li>
            </ul>
        </main>
        <footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
    </li>    <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_secondary-n2">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">secondary</h2>
            <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</span><span>/Month</span></h3>
        </header>
        <main>
            <p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</p>
            <ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9">
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>secondary</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Automated</li>
                <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Cross-platform</li>
            </ul>
        </main>
        <footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
    </li></ul>

<ul class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
    <li data-element="data-table" class="bg_default-4 c_black br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
        <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">default</h2>
        <h3 data-element="table-price" class="font-size_up-2 lh_2">
        <span class="font_bold">$860</span>
        <span>/Annual Dues</span>
        </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span>Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li>    <li data-element="data-table" class="bg_secondary-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">secondary</h2>
            <h3 data-element="table-price" class="font-size_up-2 lh_2">
                <span class="font_bold c_white">$860</span>
                <span>/Annual Dues</span>
            </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span> Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li>    <li data-element="data-table" class="bg_accent-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">accent</h2>
            <h3 data-element="table-price" class="font-size_up-2 lh_2">
                <span class="font_bold c_white">$860</span>
                <span>/Annual Dues</span>
            </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span> Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li></ul>

<ul class="gap_4 gap_4:md gap_5:lg ul_none triple-bento font_n2 font_n1:md font_0:lg">
<li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">primary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_secondary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">secondary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_accent-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">accent</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li></ul>

<h2>Single Icon Quote is for scannable and large collections</h2>
<ul class="grid columns_2:md columns_1 ul_none gap_4">
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
  <li class="wrapper-container"><blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote></li>
</ul>
<h2>Quotes with Photos are for visual interest max to 3</h2>
<ul class="grid columns_3:lg columns_2:md columns_1 ul_none gap_4 gap_5:lg ">
    <li class="wrapper-container"><blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Pepper H. Soda III, MD, FACC</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote></li>
    <li class="wrapper-container"><blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Pepper H. Soda III, MD, FACC</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote></li>
    <li class="wrapper-container"><blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Pepper H. Soda III, MD, FACC</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote></li>
</ul>

<blockquote class="Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1" aria-label="Testimonial from Myrrh Arobo">
  <em class="absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1" aria-hidden="true"></em>
  <div class="flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column" role="article">
    <p class="lh_3">
      Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)    </p>
    <cite class="c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
      <img src="https://i.pravatar.cc/50" alt="Headshot of Pepper H. Soda III, MD, FACC" class="aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start" itemprop="image" style="width: 50px;">
      <span class="flex_shrink:md lh_2 m-l_3 self_center">
        <span class="block font_accent font_bold" itemprop="name">Pepper H. Soda III, MD, FACC</span>
        <span class="font-size_down-1 opacity_8 font_ui block" itemprop="jobTitle">Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
      </span>
    </cite>
  </div>
  <em class="absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1" aria-hidden="true"></em>
</blockquote>

<blockquote class="flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden">
    <div class="bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2">
        <i class="fas fa-quote-left fa-fw"></i>
    </div>
    <div class="c_black flex_auto p_4">
        <p class="lh_3">Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)</p>
        <cite class="c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3">
        <i class="fa-user-circle fa-solid p-r_3 c_acc-n1"></i>
        Pepper H. Soda III, MD, FACC        </cite>
    </div>
</blockquote>

<div class="flex texture_medium counter_reset p_5">
   <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_alert">
            <div class="flex_shrink p_3  bg_alert-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">First it is bad</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_warning">
            <div class="flex_shrink p_3  bg_warning-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">Then it is not right</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_success">
            <div class="flex_shrink p_3  bg_success-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">At last it is good</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
</div>