Offer Card: Expanded

<div class="container">
    <div class="offer-card-wrapper">
        <div class="card-top-wrapper">
            <div class="provider-section">
                <div class="image hidden-xs">
                    <div class="provider-image">
                        <img src="/public/build/assets/images/baloise_desktop.svg" alt="provider logo">
                    </div>
                </div>
                <div class="name-rating">
                    <div class="provider-name visible-xs">
                        <h3>Provider name</h3>
                    </div>
                    <div class="provider-rating">
                        <i class="material-icons rs rating-star">stars</i>
                        <h4 class="rating-value hidden-xs">4,8/5</h4>
                        <h3 class="rating-value visible-xs">4,8/5</h3>
                        <p class="x-small hidden-xs">(69 ratings)</p>

                    </div>
                    <div class="provider-name hidden-xs">
                        <h3>Provider name</h3>
                    </div>
                    <p class="x-small visible-xs">(69 ratings)</p>

                </div>
            </div>
            <div class="price-section">
                <h4 class="scratched-provider">CHF 1020.-</h4>
                <h3 class="danger">CHF 900.-</h3>
            </div>
        </div>

        <hr class="provider-line">
        <div class="service-card-body">
            <div class="service-header">
                <h5>service</h5>
                <h5>price</h5>
            </div>
            <div class="service-holder">
                <ng-container>
                    <div class="service-item-holder-outer">
                        <div class="service-item-holder leading-holder">
                            <div class="service">
                                <label for="service-item-id checkbox" class="checkbox">
                                    <h4 class="service-name">Reinigung (inkl. Abnahmegarantie)</h4>
                                    <h4 class="danger">Herbstrabatt</h4>
                                    <input id="service-item-id" class="checkbox-default" type="checkbox">
                                </label>

                            </div>
                            <div class="price no-wrap">
                                <h3 class="scratched">CHF 2323-</h3>
                                <h4 class="danger">CHF 2323.- </h4>
                            </div>
                        </div>
                    </div>
                    <div class="service-item-holder-outer">
                        <div class="service-item-holder">
                            <div class="service">
                                <label for="service-item-id checkbox" class="checkbox">
                                    <p class="service-name hidden-xs">Disassembling/ assembling of furniture</p>
                                    <p class="x-small visible-xs service-name">Disassembling/ assembling of furniture</p>
                                    <input id="service-item-id" class="checkbox-default" type="checkbox">
                                </label>

                            </div>
                            <div class="price no-wrap">
                                <p class="hidden-xs">CHF 2323-</p>
                                <p class="x-small visible-xs">CHF 2323-</p>
                            </div>
                        </div>
                    </div>
                </ng-container>
            </div>
            <hr class="provider-line">
            <div class="">
                <div class="service-bottom-holder-top">
                    <div class="discount-holder">
                        <div class="voucer-wrapp">
                            <p class="medium-body">Voucer &nbsp;
                            <p class="medium-body">
                                -30%
                            </p>
                            </p>
                        </div>
                        <p class="medium-body">- CHF 3434.–</p>
                    </div>
                    <hr class="divide-line-bigger">
                    <div class="customer-care-free-holder">
                        <p class="medium-body">Movu customer care</p>
                        <p class="medium-body">Free</p>
                    </div>
                    <hr class="divide-line-bigger">
                    <div class="total-holder">
                        <p class="medium-body">Total</p>
                        <p class="large medium-body">CHF 3223.–</p>
                    </div>
                </div>

            </div>
        </div>

        <hr class="provider-line">
        <div class="card-bottom-wrapper">
            <div class="tag-info">
                <div class="tag-wrapper tag-wrapper-no-popover hidden-xs">
                    <p class="recommendation-tag small">Movu recommendation</p>
                    <p class="premium-tag small ">Premium Partner</p>
                    <p class="regional-tag small">Regional</p>
                    <p class="small">Great Price</p>
                </div>
                <div class="tag-wrapper tag-wrapper-no-popover visible-xs">
                    <p class="recommendation-tag x-small">Movu recommendation</p>
                    <p class="premium-tag x-small">Premium Partner</p>
                    <p class="regional-tag x-small">Regional</p>
                    <p class="x-small">Great Price</p>
                </div>
                <div class="info">
                    <span class="material-icons">
                        thumb_up
                    </span>
                    <p class="x-small visible-xs">Wurde bereits <span class="medium-body">2300</span> mal <span class="medium-body">gebucht.</span></p>
                    <p class="small hidden-xs">Wurde bereits <span class="medium-body">2300</span> mal <span class="medium-body">gebucht.</span></p>
                </div>
            </div>
            <movu-button custom_class="button-small wrap-new-btn" flat icon_name="remove" text="hide details">
            </movu-button>
        </div>
        <div class="go-to-offer-btn">
            <movu-button custom_class="button-small" primary right_icon="navigate_next" text="go to offer">
            </movu-button>
        </div>

    </div>
</div>