og-image.og.njk

<style>
    .root {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .mark {
        color: white;
        font-size: 50px;
        opacity: 0.5;
        padding: 3rem;
        text-transform: uppercase;
        padding-bottom: 1rem;
        display: flex;
        flex-direction: column;
    }

    .title {
        color: white;
        font-size: 80px;
        background: #ea580c;
        padding: 3rem 6rem;
        transform: rotate(-5deg);
        margin-left: -3rem;
        margin-right: -3rem;
        border: 20px solid #fff;
        display: flex;
        justify-content: center;
    }
</style>

<div class="bg-gray-800 root">
    <h2 class="mark">
        <div>Applied</div>
        <div>Cartography.</div>
    </h2>
    <h1 class="title">
        <span>{{ title }}</span>
    </h1>
    <div class="flex-1 flex"></div>
    <div class="flex justify-end font-lg p-[3rem] text-4xl text-white opacity-50">
        {{ date }}
    </div>
</div>