@extends('business.layouts.base')

@section('contents')
<section class="p-modal-select-layout">
    <p class="p-modal-select-layout__title">レイアウトをお選びください。</p>

    <ul class="p-modal-select-layout__list d-flex justify-content-center">
        <li class="p-modal-select-layout__li">
            <a href="#" class="p-modal-select-layout__li-link">
                <p class="p-modal-select-layout__li-ttl">4枚ずつ</p>
                <div class="p-modal-select-layout__li-frame">
                    <table class="p-modal-select-layout__li-frame-tbl p-modal-select-layout__li-frame--tbl4">
                        <tr>
                            <td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td>
                        </tr>
                    </table>
                </div>
            </a>
        </li>
        <li class="p-modal-select-layout__li">
            <a href="#" class="p-modal-select-layout__li-link">
                <p class="p-modal-select-layout__li-ttl">8枚ずつ</p>
                <div class="p-modal-select-layout__li-frame">
                    <table class="p-modal-select-layout__li-frame-tbl p-modal-select-layout__li-frame--tbl8">
                        <tr>
                            <td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td>
                        </tr>
                    </table>
                </div>
            </a>
        </li>
        <li class="p-modal-select-layout__li">
            <a href="#" class="p-modal-select-layout__li-link">
                <p class="p-modal-select-layout__li-ttl">16枚ずつ</p>
                <div class="p-modal-select-layout__li-frame">
                    <table class="p-modal-select-layout__li-frame-tbl p-modal-select-layout__li-frame--tbl16">
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td>
                        </tr>
                        <tr>
                            <td></td><td></td><td></td><td></td><td></td><td></td>
                        </tr>
                    </table>
                </div>
            </a>
        </li>
    </ul>    

</section>

@endsection