@layout PageLayout;

@inherits BasePage

@page "/immortal-home"

<LayoutMediumContentComponent>
    <PaperComponent>
        <div class="mainContainer">
            <div class="mainTitle">
                Fan Reference
            </div>

            <div>
                Refer to various aspects of "IMMORTAL: Gates of Pyre" from this external reference!
            </div>
        </div>
    </PaperComponent>

    <ContentDividerComponent></ContentDividerComponent>

    <PaperComponent>
        <div class="heroesContainer">

            <ContentHighlightComponent Title="Build Calculator"
                                       Description="Make a build!"
                                       Href="/build-calculator"
                                       ImageHref="image/hero/Build.png" />

            <ContentHighlightComponent Title="Database"
                                       Description="Review the units!"
                                       Href="/database"
                                       ImageHref="image/hero/Database.png" />


        </div>
    </PaperComponent>

</LayoutMediumContentComponent>

<style>
    .mainContainer {
        padding-bottom: 32px;
    }

    .mainTitle {
        font-size: 2.2rem;
        font-weight: bold;
    }

    .heroesContainer {
        display: grid;
        gap: 64px;
        justify-content: center;
        margin: auto;
        grid-template-columns: 1fr 1fr;
    }


    @@media only screen and (max-width: 1025px) {
        .heroesContainer {
            grid-template-columns: 1fr;
        }
    }
</style>