<div style="display:grid; gap: 1rem; grid-template-columns: 20vw repeat(2,1fr);">
    <div style="grid-area: 1 / 1 / span 5 / 1;">
        <a href="<?= $image->ImageName ?>" data-lightbox="pack-image" data-title=".">
            <img class="example-image" src="<?= $image->ImageName ?>" alt="<?= $image->ImageID ?>" style="max-width:10vw; max-height:10vw;">
        </a>
    </div>
    <div><span class="recipes-main-headings">ID</span> <?= $recipe->RecipeID ?></div>
    <div><span class="recipes-main-headings">Category</span> <?= $recipe->Category ?></div>
    <div><span class="recipes-main-headings">Roast Level</span> <?= $recipe->RoastLevel ?></div>
    <div><span class="recipes-main-headings">Agtron Number</span> <?= $recipe->RoastColourNo ?> (<?= $recipe->RoastColourName ?>)</div>
    <div><span class="recipes-main-headings">Warehouse Storage Location</span> <?= $recipe->storage_location ?></div>
    <div><span class="recipes-main-headings">Finished Weight per Unit</span> <?= $recipe->PackQty ?>g</div>
    <div><span class="recipes-main-headings">Units per Outer</span> <?= $recipe->OuterSize ?></div>
    <div><span class="recipes-main-headings">Production Wastage(%)</span> <?= $recipe->WastePercent ?></div>
    <div style="grid-column: 1 / span 2;"><span class="recipes-main-headings"><?= number_format($recipe->sumcoffeeqty,3) ?>Kg of Coffee is needed to produce <?= number_format(($recipe->NumPacks * $recipe->PackQty)/1000,3)."Kg"?> of finished coffee in <?= $recipe->NumPacks ?> Unit<?= $recipe->NumPacks > 1?'s':''?></span></div>
    <div></div>
    <div></div>
</div>
<div class="recipes-main-headings">Notes</div>
<div id="recipes-notes"><?= $recipe->Notes ?></div>