<style>
    @media screen {

        html {
            background-color: rgb(252, 243, 243);
        }

    }

    @media print {

        @page {
            margin: 20px;
            size: auto;
        }



        .dis {
            display: grid;
            grid-template-columns: auto auto;
            grid-gap: 20px;
        }

        .dis>div.box {
            border: 1px solid red;
            background-color: rgb(248, 233, 15);
            border-radius: 5px;
            width: 10.7cm;
            height: 7cm;
            margin: 10px;
        }

        .head {
            width: 100%;
            height: 50px;
            background-color: red;
            border-bottom-right-radius: 15px;
            border-bottom-left-radius: 15px;
            text-align: center;
            position: relative;
        }

        .head span {
            font-size: 30px;
            font-weight: bold;
            color: white;
        }

        .nm {
            font-size: 30px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            margin-top: 10px;
            text-transform: uppercase;
        }

        .bar {
            background-color: white;
            padding: 10px;
            margin: 10px;
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
        }



        .foot {
            width: 100%;
            height: auto;
            background-color: black;
            position: relative;
            /* border-top-right-radius: 10px;
            border-top-left-radius: 10px; */
            text-align: center
        }

        .foot span {
            font-size: 30px;
            font-weight: bold;
            color: white;
        }
    }
</style>
<div class="page">
    <div class=" dis">
        @foreach ($kartu as $k)
            <div class="box">
                <div class="head">
                    <span>Ramizah Store</span>
                </div>
                <div class="nm">{{ $k['nama'] }}</div>
                <div class="bar">{!! DNS1D::getBarcodeHTML($k['kode'], 'C39', 1.5, 49) !!}</div>

                <div class="foot">
                    <span>{{ $k['kode'] }}</span>
                </div>
            </div>
        @endforeach
    </div>




</div>
