<style>
@page {
    margin: 5mm;
}

header {
    margin: 0 0 5mm 0;
    background-color: #D6DCE5;
    color: #7F7F7F;
    padding: 2mm 5mm 2mm 5mm;
    font-size: 16px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 35px;
    text-align: right;
}

header img {
    position: absolute;
    top: 3mm;
    left: 5mm;
}

.bg {
    background-image: url('assets/img/planta.png');
    background-repeat: no-repeat;
    height: 277mm;
    width: 190mm;
    top: 15px;
    left: 5mm;
    bottom: 0;
    position: fixed;
}

.bloco {
    width: 80mm;
    height: 42mm;
    position: absolute;
}

.esquerda {
    top: 40mm;
    left: 0mm;
}

.direita {
    top: 40mm;
    right: 5mm;
}

.superior {
    top: 130mm;
    left: 0mm;
}

.inferior {
    top: 130mm;
    right: 5mm;
}

.frente {
    top: 220mm;
    left: 0mm;
}

.traseira {
    top: 220mm;
    right: 5mm;
}

h4, p {
    margin-bottom: 0;
    padding: 0;
}

h4 {
    text-align: center;
}
</style>
<div class="bg">
    <h2><span style="float: right"></span></h2>
    <div class="bloco esquerda">
        <h4>Lateral esquerda</h4>
    </div>
    <div class="bloco direita">
        <h4>Lateral direita</h4>
    </div>
    <div class="bloco superior">
        <h4>Parte superior</h4>
    </div>
    <div class="bloco inferior">
        <h4>Parte inferior</h4>
    </div>
    <div class="bloco frente">
        <h4>Frente</h4>
    </div>
    <div class="bloco traseira">
        <h4>Traseira</h4>
    </div>
</div>
<header style="background-color: #D6DCE5;">
    <img src="assets/img/logo_rel.png" alt="Logo" style="width: 24%;">
    <div style="float: right;">
            Croqui {{ @contrato.veiculo_marca }} {{ @contrato.veiculo_modelo }} [{{ @contrato.veiculo_placa }}]<br>
        <small class="status">Contrato Nº {{ @contrato.id }}</small>
    </div>
</header>