<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 style="grid-area: 1 2;"><span class="recipes-main-headings">Category</span> <?= $recipe->Category ?></div>
    <div style="grid-area: 1 3;"><span class="recipes-main-headings">ID</span> <?= $recipe->RecipeID ?></div>

    <div style="grid-area: 2 2;"><span class="recipes-main-headings">Finished Weight(g)</span> <?= $recipe->PackQty ?></div>
    <div style="grid-area: 2 3;"><span class="recipes-main-headings">Packs per Outer</span> <?= $recipe->OuterSize ?></div>

    <div style="grid-area: 3 2;"><span class="recipes-main-headings">Production Waste of Coffee(%)</span> <?= $recipe->WastePercent ?></div>
    <div style="grid-area: 3 3;"><span class="recipes-main-headings">Roast Level</span> <?= $recipe->RoastLevel ?></div>

    <div style="grid-area: 4 2;"><span class="recipes-main-headings">Agtron Number</span> <?= $recipe->RoastColourNo ?> (<?= $recipe->RoastColourName ?>)</div>
    <div style="grid-area: 4 3;"><span class="recipes-main-headings">Warehouse Storage Location</span> <?= $recipe->storage_location ?></div>

    <div style="grid-area: 5 2;"><span class="recipes-main-headings">Last updated</span> <?= $recipe->lastupdated ?></div>
</div>
<div class="recipes-main-headings">Notes</div>
<div id="recipes-notes"><?= $recipe->Notes ?></div>