Cards: Location Search

<h3>Simple</h3>
<div class="row" style="background: #e7e7e7;padding-top:2em;padding-bottom:2em;">
    <div class="col-sm-12 col-lg-7">
        <div class="hgm-card horizontal search-result">

            <div class="hgm-card__body image">
                <img src="https://img.freepik.com/premium-photo/modern-hospital-with-stateoftheart-equipment-skilled-medical-professionals_1279788-7315.jpg" />
                <div class="col location-status">
                    <span class="hgm-badge light location-type">Hospital</span>
                    <div data-id="178" id="hgmLocationMarqueeHoursStatus" class="open" data-hours-open-status-color="#8AC926" style="--hours-open-status-color:#8AC926;">
                        <i class="fa-regular fa-clock"></i> <span><strong>Open now</strong></span>
                    </div>
                    <span class="hgm-badge distance">2.3 mi</span>
                </div>

                <h5>Crestner Health Medical Center - Central Denver</h5>

                <p class="address" translate="no"><span class="address-line1">1150 East Colfax</span><span class="address-line2">Suite 400</span> - <span class="locality">Denver</span>, <span class="administrative-area">C0</span><span class="postal-code">80218</span></p>

                <div class="hgm-accordion sm ghost">
                    <div class="hgm-accordion__item">
                        <input type="checkbox" id="itemTrigger1" name="input_trigger">
                        <label for="itemTrigger1" class="hgm-accordion__label">Show more</label>
                        <div class="hgm-accordion__content">
                            <div class="hgm-location-details__block">
                                <h6>Hours</h6>
                                <div class="field field-hg-hours-of-operation">
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default bold">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="hgm-card__footer">
                <div class="location-quick-links">
                    <div id="hgmLocatonPhone"><i class="fa-regular fa-phone"></i> <a class="hgm-marquee-two-column__link" title="Call us at (777)-777-7777" href="tel:1(777)-777-7777" target="_blank" rel="noopener">(777)-777-7777</a>
                    </div>
                    <p>
                        <i class="fa-regular fa-info-circle"></i>
                        <a class="hgm-marquee-two-column__link" href="https://maps.google.com?saddr=Current+Location&amp;daddr=2300%20Hospital%20Drive%20Bossier City%20LA">View Details</a>
                    </p>
                    <button type="button" class="hgm-button">Call to action button</button>
                </div>
            </div>

        </div>
        <div class="hgm-card search-result__group">

            <div class="hgm-card__body">

                <div class="group-status">
                    <h6>2 locations at this address</h6>
                    <span class="hgm-badge distance">2.3 mi</span>
                </div>
                <div class="hgm-card horizontal search-result">

                    <div class="hgm-card__body image">
                        <img src="https://img.freepik.com/premium-photo/modern-hospital-with-stateoftheart-equipment-skilled-medical-professionals_1279788-7315.jpg" />
                        <div class="col location-status">
                            <span class="hgm-badge light location-type">Hospital</span>
                            <div data-id="178" id="hgmLocationMarqueeHoursStatus" class="open" data-hours-open-status-color="#8AC926" style="--hours-open-status-color:#8AC926;">
                                <i class="fa-regular fa-clock"></i> <span><strong>Open now</strong></span>
                            </div>

                        </div>

                        <h5>Crestner Health Medical Center - Central Denver</h5>

                        <p class="address" translate="no"><span class="address-line1">1150 East Colfax</span><span class="address-line2">Suite 400</span> - <span class="locality">Denver</span>, <span class="administrative-area">C0</span><span class="postal-code">80218</span></p>

                        <div class="hgm-accordion sm ghost">
                            <div class="hgm-accordion__item">
                                <input type="checkbox" id="itemTrigger1" name="input_trigger">
                                <label for="itemTrigger1" class="hgm-accordion__label">Show more</label>
                                <div class="hgm-accordion__content">
                                    <div class="hgm-location-details__block">
                                        <h6>Hours</h6>
                                        <div class="field field-hg-hours-of-operation">
                                            <div>
                                                <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                                    <div class="field field-hg-day-of-week">Monday</div>
                                                    <div class="field field-hg-start-time">8:00am</div>
                                                    <div class="field field-hg-end-time">5:00pm</div>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                                    <div class="field field-hg-day-of-week">Monday</div>
                                                    <div class="field field-hg-start-time">8:00am</div>
                                                    <div class="field field-hg-end-time">5:00pm</div>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default bold">
                                                    <div class="field field-hg-day-of-week">Monday</div>
                                                    <div class="field field-hg-start-time">8:00am</div>
                                                    <div class="field field-hg-end-time">5:00pm</div>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                                    <div class="field field-hg-day-of-week">Monday</div>
                                                    <div class="field field-hg-start-time">8:00am</div>
                                                    <div class="field field-hg-end-time">5:00pm</div>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                                    <div class="field field-hg-day-of-week">Monday</div>
                                                    <div class="field field-hg-start-time">8:00am</div>
                                                    <div class="field field-hg-end-time">5:00pm</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="hgm-card__footer">
                        <div class="location-quick-links">
                            <div id="hgmLocatonPhone"><i class="fa-regular fa-phone"></i> <a class="hgm-marquee-two-column__link" title="Call us at (777)-777-7777" href="tel:1(777)-777-7777" target="_blank" rel="noopener">(777)-777-7777</a>
                            </div>
                            <p>
                                <i class="fa-regular fa-info-circle"></i>
                                <a class="hgm-marquee-two-column__link" href="https://maps.google.com?saddr=Current+Location&amp;daddr=2300%20Hospital%20Drive%20Bossier City%20LA">View Details</a>
                            </p>
                            <button type="button" class="hgm-button">Call to action button</button>
                        </div>
                    </div>

                </div>

                <div class="hgm-card horizontal search-result">

                    <div class="hgm-card__body image">
                        <img src="https://img.freepik.com/premium-photo/modern-hospital-with-stateoftheart-equipment-skilled-medical-professionals_1279788-7315.jpg" />

                        <h5>Crestner Health Medical Center</h5>
                        <p class="address" translate="no"><span class="address-line1">1150 East Colfax the longest street in america</span><span class="address-line2">Suite 400</span> - <span class="locality">Denver</span>, <span class="administrative-area">C0</span><span class="postal-code">80218</span></p>

                    </div>

                    <div class="hgm-card__footer">
                        <div class="location-quick-links">
                            <div id="hgmLocatonPhone"><i class="fa-regular fa-phone"></i> <a class="hgm-marquee-two-column__link" title="Call us at (777)-777-7777" href="tel:1(777)-777-7777" target="_blank" rel="noopener">(777)-777-7777</a>
                            </div>
                            <p>
                                <i class="fa-regular fa-info-circle"></i>
                                <a class="hgm-marquee-two-column__link" href="https://maps.google.com?saddr=Current+Location&amp;daddr=2300%20Hospital%20Drive%20Bossier City%20LA">View Details</a>
                            </p>
                            <button type="button" class="hgm-button">Call to action button</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="hgm-card horizontal search-result">

            <div class="hgm-card__body image">
                <img src="https://img.freepik.com/premium-photo/modern-hospital-with-stateoftheart-equipment-skilled-medical-professionals_1279788-7315.jpg" />
                <div class="col location-status">
                    <span class="hgm-badge light location-type">Hospital</span>
                    <div data-id="178" id="hgmLocationMarqueeHoursStatus" class="open" data-hours-open-status-color="#8AC926" style="--hours-open-status-color:#8AC926;">
                        <i class="fa-regular fa-clock"></i> <span><strong>Open now</strong></span>
                    </div>
                    <span class="hgm-badge distance">2.3 mi</span>
                </div>

                <h5>Crestner Health Medical Center - Central Denver</h5>

                <p class="address" translate="no"><span class="address-line1">1150 East Colfax</span><span class="address-line2">Suite 400</span> - <span class="locality">Denver</span>, <span class="administrative-area">C0</span><span class="postal-code">80218</span></p>

                <div class="hgm-accordion sm ghost">
                    <div class="hgm-accordion__item">
                        <input type="checkbox" id="itemTrigger1" name="input_trigger">
                        <label for="itemTrigger1" class="hgm-accordion__label">Show more</label>
                        <div class="hgm-accordion__content">
                            <div class="hgm-location-details__block">
                                <h6>Hours</h6>
                                <div class="field field-hg-hours-of-operation">
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default bold">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="paragraph paragraph--type--hg-hours-of-operation paragraph--view-mode--default">
                                            <div class="field field-hg-day-of-week">Monday</div>
                                            <div class="field field-hg-start-time">8:00am</div>
                                            <div class="field field-hg-end-time">5:00pm</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="hgm-card__footer">
                <div class="location-quick-links">
                    <div id="hgmLocatonPhone"><i class="fa-regular fa-phone"></i> <a class="hgm-marquee-two-column__link" title="Call us at (777)-777-7777" href="tel:1(777)-777-7777" target="_blank" rel="noopener">(777)-777-7777</a>
                    </div>
                    <p>
                        <i class="fa-regular fa-info-circle"></i>
                        <a class="hgm-marquee-two-column__link" href="https://maps.google.com?saddr=Current+Location&amp;daddr=2300%20Hospital%20Drive%20Bossier City%20LA">View Details</a>
                    </p>
                    <button type="button" class="hgm-button">Call to action button</button>
                </div>
            </div>

        </div>
    </div>
    <div class="col-lg-5" style="height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    font-size: 2em;
    font-weight: 700;
    color: #999999;">MAP</div>
</div>