Modal Styles

                        <button type="button" name="button" class="button js-modal-activator" data-target="#modal">Active Modal</button>
                        <aside class="modal js-modal" id="modal" aria-hidden="true">
                            <div class="wrap wrap--padded">
                                <div class="modal__container">
                                    <div class="modal__header">
                                        <h2 class="h5">Modal with Buttons</h2>
                                    </div>
                                    <div class="modal__body">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum egestas nunc. Proin eget lobortis diam. Nullam hendrerit nisl urna, vel bibendum risus dignissim in. Maecenas efficitur, neque in mattis maximus.</p>
                                        <p>purus velit sodales tellus, ut elementum leo mauris at elit. Nulla a diam a enim interdum elementum. Curabitur luctus non massa ut viverra. Nam in molestie orci. Donec sodales elementum euismod. Integer in velit at erat iaculis dictum.</p>
                                    </div>
                                    <button type="button" class="icon icon--close js-modal-deactivator">
                                        <span class="visually-hidden">Click to close modal</span>
                                    </button>
                                </div>
                            </div>
                        </aside>
                    

                        <button type="button" name="button" class="button js-modal-activator" data-target="#modal-2">Active Modal with Buttons</button>
                        <aside class="modal js-modal" id="modal-2" aria-hidden="true">
                            <div class="wrap wrap--padded">
                                <div class="modal__container">
                                    <div class="modal__header">
                                        <h2 class="h5">Modal with Buttons</h2>
                                    </div>
                                    <div class="modal__body">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum egestas nunc. Proin eget lobortis diam. Nullam hendrerit nisl urna, vel bibendum risus dignissim in. Maecenas efficitur, neque in mattis maximus.</p>
                                        <p>purus velit sodales tellus, ut elementum leo mauris at elit. Nulla a diam a enim interdum elementum. Curabitur luctus non massa ut viverra. Nam in molestie orci. Donec sodales elementum euismod. Integer in velit at erat iaculis dictum.</p>
                                    </div>
                                    <div class="modal__footer">
                                        <button type="button" class="button button--tertiary button--sm modal__prev-click">Cancel</button>
                                        <button type="button" class="button button--primary button--sm modal__next-click">Accept</button>
                                    </div>
                                    <button type="button" class="icon icon--close js-modal-deactivator">
                                        <span class="visually-hidden">Click to close modal</span>
                                    </button>
                                </div>
                            </div>
                        </aside>
                    

                        <button type="button" name="button" class="button js-modal-activator" data-target="#modal-3">Active Modal with steps</button>
                        <aside class="modal js-modal js-modal--step" id="modal-3" aria-hidden="true">
                            <div class="wrap wrap--padded">
                                <div class="modal__container">
                                    <div class="modal__header">
                                        <h2 class="h5">Modal with sections 1</h2>
                                    </div>
                                    <div class="modal__body modal__step">
                                        <p>Section 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum egestas nunc. Proin eget lobortis diam. Nullam hendrerit nisl urna, vel bibendum risus dignissim in. Maecenas efficitur, neque in mattis maximus.</p>
                                    </div>
                                    <div class="modal__body modal__step">
                                        <p>Section 2 purus velit sodales tellus, ut elementum leo mauris at elit. Nulla a diam a enim interdum elementum. Curabitur luctus non massa ut viverra. Nam in molestie orci. Donec sodales elementum euismod. Integer in velit at erat iaculis dictum.</p>
                                    </div>
                                    <div class="modal__body modal__step">
                                        <p>Section 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum egestas nunc. Proin eget lobortis diam. Nullam hendrerit nisl urna, vel bibendum risus dignissim in. Maecenas efficitur, neque in mattis maximus.</p>
                                    </div>
                                    <div class="modal__body modal__step">
                                        <p>Section 4 purus velit sodales tellus, ut elementum leo mauris at elit. Nulla a diam a enim interdum elementum. Curabitur luctus non massa ut viverra. Nam in molestie orci. Donec sodales elementum euismod. Integer in velit at erat iaculis dictum.</p>
                                    </div>
                                    <div class="modal__footer">
                                        <button type="button" class="button button--tertiary button--sm modal__prev-click">Cancel</button>
                                        <button type="button" class="button button--primary button--sm  modal__next-click">Next</button>
                                    </div>
                                    <button type="button" class="icon icon--close js-modal-deactivator">
                                        <span class="visually-hidden">Click to close modal</span>
                                    </button>
                                </div>
                            </div>
                        </aside>