---
import Divider from "../components/misc/Divider.astro";
import Layout from "./Layout.astro";

const { frontmatter } = Astro.props;
---

<Layout>
    <main
        class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
        <div class="relative mb-4">
            <img class="aspect-video object-cover" src={frontmatter.image} alt=""/>
            <a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
                <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
            </a>
        </div>
        <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
        <p>{frontmatter.date}</p>
        <Divider />
        <slot />
    </main>
</Layout>