<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
    @page {
        margin: 0;
    }

    body{
        margin:0;
        padding:0;
    }

    .sticker{
        width:40mm;
        height:40mm;
        overflow:hidden;
        position:relative;
        box-sizing:border-box;
    }

    .qr{
        width:29mm;
        height:29mm;
        position:absolute;
        top:-1mm;
        left:5.8mm;
    }

    .serial{
        position:absolute;
        top:27mm; /* 3 + 22 + 1mm spacing */
        width:100%;
        text-align:center;
        /* font-family:Arial, sans-serif; */
        font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
        font-weight:bold;
        font-size:3mm;
        letter-spacing:-0.2mm;
        transform: scaleX(0.85);
        transform-origin:center;
    }
    .desc{
        position:absolute;
        top:31mm;
        width:100%;
        text-align:center;
        font-family:Arial, sans-serif;
        font-weight:bold;
        font-size:4mm;
        white-space:nowrap;
    }
</style>
</head>

<body>

@foreach($stickers as $sticker)
<div class="sticker">

    <img class="qr" src="{{ $sticker['qr'] }}">

    <div class="serial">
        {{ $sticker['serial'] }}
    </div>

    <div class="desc">
        {{ $sticker['description'] }}
    </div>

</div>
@endforeach

</body>
</html>
