<script>
    import MainLayout from "../../Layout/MainLayout.svelte";
    import SidebarItem from "../../Layout/Sidebar/SidebarItem.svelte";
    import HeaderItem from "../../Layout/Header/HeaderItem.svelte";

    export let id = ""
</script>

<MainLayout>
    <svelte:fragment slot="header">
        <HeaderItem>Header!</HeaderItem>
    </svelte:fragment>
    <svelte:fragment slot="sidebar">
        <SidebarItem title="Sidebar Content">An Item</SidebarItem>
        <SidebarItem title="Sidebar Content 2">An Item 2</SidebarItem>
    </svelte:fragment>

<div class="flex flex-col">
    <img class="flex flex-grow-0" src="https://upload.wikimedia.org/wikipedia/commons/8/83/Solar_system.jpg" />
    <div>
        <div style="font-size: 2em; text-align: center;">COMMENTS</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
        <div>BLAH BLAH BLAH</div>
    </div>
</div>


</MainLayout>

<style>

    img
    {
        max-width: 100%;
        max-height: 75vh;
        object-fit: contain;
    }
</style>
