kairoscope-website-2021/themes/kairoscope-theme/layout/game.ejs

<main role="main" class="bg-dark2" >
    <% if(page.library_hero != undefined) { %>
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="" style="text-align: center; padding: 0px;">
                    <img src="<%- page.library_hero %>" class="img-fluid cover-bg">
                    <img src="<%- page.library_logo %>" style="width: 65%; position: relative; top: -60%;">
                </div>
            </div>
        </div>
    <% } %>

    <% if(page.description != undefined) { %>
        <section class="py-5 text-center container" 
            <% if(page.library_hero != undefined) { %> style="margin-top: -35%;" <% } %> >
            <div class="row py-lg-5">
                <div class="col-10 mx-auto">
                    <p class="lead"><%- page.description %></p>
                    <a class="btn-steam" href="https://store.steampowered.com/app/1481070/Max_Raider/">
                    <!-- <img src="images/button-steam.png"> -->
                    </a>
                </div>
            </div>
        </section>
    <% } %>


    <% if(page.media != undefined) { %>

        <div class="album py-5">
            <div class="container-fluid content">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 space-bottom">
                    <% var screenshot_count = (Math.round(page.media.screenshots.list.length/3)*3) %>
                    <% for(var i = 0; i < screenshot_count; i++) { %>
                        <div class="col">
                            <div class="card shadow-sm card-dark hoverable">
                                <a href="<%- page.media.screenshots.list[i] %>" target="_BLANK">
                                <img src="<%- page.media.screenshots.list[i] %>" class="img-fluid">
                                </a>
                            </div>
                        </div>
                    <% }; %>
                    
                </div>
            </div>
        </div>
    <% } %>
    <% if(page.trailer != undefined) { %>
    <div class="album py-5 bg-darker">
        <div class="container container-large">
        <div class="row justify-content-center">
            <div class="col-lg-10" style="text-align: center;">
            <div class="ratio ratio-16x9">
                <iframe class="video-player" src="<%- page.trailer %>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            </div>
        </div>
        </div>
    </div>
    <% } %>

    <section class="py-5 container">
        <div class="row py-lg-5">
            <div class="col-10 mx-auto post-content">
                <p class="lead text-muted"><%- page.content %></p>
            </div>
        </div>
    </section>

    <% if(page.steam_widget != undefined) { %>
        <div class="container ">
            <div class="row justify-content-center">
                <div class="col-10" style="text-align: center;">
                <div class="ratio-steam" style="margin-top: 30px;">
                    <iframe src="<%- page.steam_widget %>" frameborder="0"></iframe>
                </div>
                <!-- <div class="d-block d-sm-none">
                    <a class="btn-steam" href="https://store.steampowered.com/app/1481070/Max_Raider/">
                    <img src="images/button-steam.png">
                    </a>
                </div> -->
                </div>
            </div>
        </div>
    <% } %>

    <footer>
        <%- partial('_partial/logo', { created_by : true }) %>

        <%- partial('_partial/contact') %>

        <%- partial('_partial/about') %>

        <%- partial('_partial/newsletter') %>

        <%- partial('_partial/links') %>

        
    </footer>
</main>