Modal Large

<dialog data-target="mymodal" closedby="closerequest" class="dialog--wide">
    <button type="button" class="dialog__close" data-closemodal>
        <i class="ph ph-bold ph-x"></i>
    </button>

    <div class="container --inline">
        <div class="row">
            <section class="d_grid-7 m_grid-4">
                <div class="media_cardstack">
                    <div class="media_papercard">
                        <img src="../../papercard/front.png" alt="ecard" width="133.5" height="184.3" />
                    </div>
                    <div class="media_papercard">
                        <img src="../../papercard/back.png" alt="ecard" width="133.5" height="184.3" />
                    </div>
                </div>
            </section>
            <section class="d_grid-5 m_grid-4 flow--onehalf">
                <h1 class="h1">Deine Papierkarte</h1>
                <div class="form_set">
                    <label for="quantity">Anzahl</label>
                    <select name="quantity" id="quantity" data-priceswitch="papercard_options">
                        <option value="10">10 Stück (inkl. Umschläge)</option>
                        <option value="20">20 Stück (inkl. Umschläge) • Spare 12%</option>
                        <option value="30">30 Stück (inkl. Umschläge) • Spare 14%</option>
                        <option value="40">40 Stück (inkl. Umschläge) • Spare 15%</option>
                        <option value="50">50 Stück (inkl. Umschläge) • Spare 20%</option>
                        <option value="60">60 Stück (inkl. Umschläge) • Spare 22%</option>
                        <option value="70">70 Stück (inkl. Umschläge) • Spare 23%</option>
                        <option value="80">80 Stück (inkl. Umschläge) • Spare 25%</option>
                        <option value="90">90 Stück (inkl. Umschläge) • Spare 28%</option>
                        <option value="100">100 Stück (inkl. Umschläge) • Spare 32%</option>
                    </select>
                </div>

                <div class="price_wrapper">
                    <div class="compare_price"><s data-compareprice></s></div>
                    <div class="price"><strong data-price>18,35 €</strong></div>
                    <div class="unit_price">(<span data-unitprice>1,83 €</span>) pro Stück</div>
                </div>

                <ul class="product_specs">
                    <li><strong>Versanddauer:</strong> ca. 5-7 Werktage</li>
                    <li><strong>Größe:</strong> 10,5cm x 14,85cm</li>
                </ul>

                <ul class="product_usps">
                    <li>
                        <i class="ph-bold ph-truck"></i>
                        <strong>Kostenloser Versand</strong>
                    </li>
                    <li>
                        <i class="ph-bold ph-envelope-simple-open"></i>
                        <span>Inkl. Premium Umschläge weiß</span>
                    </li>
                    <li>
                        <i class="ph-bold ph-crown-simple"></i>
                        <span>Premium Papier matt</span>
                    </li>
                    <li>
                        <i class="ph-bold ph-shield-slash"></i>
                        <span>Kein Wasserzeichen</span>
                    </li>
                </ul>

                <input type="hidden" value="1" name="quantity" data-shopify-quantity>

                <div class="btn_wrap">
                    <button role="button" data-redirectmodal class="btn btn--primary btn--large btn--fullwidth">
                        <i class="ph-bold ph-shopping-cart-simple"></i>
                        In den Warenkorb
                    </button>
                </div>
            </section>
        </div>
    </div>

    <div class="dialog__footer">
        <div class="trust_badges">
            <div class="trust_badge --column">
                <p class="line">
                    <span class="rating_stars">
                        <i class="ph-fill ph-star"></i>
                        <i class="ph-fill ph-star"></i>
                        <i class="ph-fill ph-star"></i>
                        <i class="ph-fill ph-star"></i>
                        <i class="ph-fill ph-star"></i>
                    </span>
                    <strong>Ausgezeichnet 4.9/5</strong>
                </p>

                <p class="line">Basierend auf über 4.300 Bewertungen auf <img class="badge_judge_me" src="../../badge_judge_me.svg" width="37" height="9" alt="eCardilly Kundenservice"></p>
            </div>
            <div class="trust_badge">
                <div class="badge">
                    <img src="../../badge_kundenservice.svg" width="50" height="50" alt="eCardilly Kundenservice">
                </div>
                <p>Keine Sorge beim Bestellen. <strong>Wir sind per E-Mail, WhatsApp oder Shop-Chat für dich da</strong>, damit deine Karte perfekt ankommt.</p>
            </div>
        </div>
    </div>

    <div class="dialog__overlay --hidden">
        <img src="../../loading_spinner--inverted.svg" alt="Loading.." width="50">
        Deine Papierkarte wird in <br> den Warenkorb gelegt.
    </div>
</dialog>

<script>
    window.papercard_options = {
        "10": {
            "price": "29,00 €",
            "unit_price": "2,90 €"
        },
        "20": {
            "price": "51,04 €",
            "unit_price": "2,55 €",
            "discount": "12%",
            "compare_price": "58,00 €"
        },
        "30": {
            "price": "74,82 €",
            "unit_price": "2,49 €",
            "discount": "14%",
            "compare_price": "87,00 €"
        },
        "40": {
            "price": "98,60 €",
            "unit_price": "2,46 €",
            "discount": "15%",
            "compare_price": "116,00 €"
        },
        "50": {
            "price": "116,00 €",
            "unit_price": "2,32 €",
            "discount": "20%",
            "compare_price": "145,00 €"
        },
        "60": {
            "price": "135,72 €",
            "unit_price": "2,26 €",
            "discount": "22%",
            "compare_price": "174,00 €"
        },
        "70": {
            "price": "156,31 €",
            "unit_price": "2,23 €",
            "discount": "23%",
            "compare_price": "203,00 €"
        },
        "80": {
            "price": "174,00 €",
            "unit_price": "2,17 €",
            "discount": "25%",
            "compare_price": "232,00 €"
        },
        "90": {
            "price": "187,92 €",
            "unit_price": "2,08 €",
            "discount": "28%",
            "compare_price": "261,00 €"
        },
        "100": {
            "price": "197,20 €",
            "unit_price": "1,97 €",
            "discount": "32%",
            "compare_price": "290,00 €"
        }
    }
</script>

<button type="button" class="btn btn--primary" data-showmodal="mymodal">
    Papierkarte
</button>

<script>
    document.querySelector("dialog").showModal();
</script>