<div class="container--hero">
    <div id="hero-cube">

        <figure class="side front">
            <picture>
                <source type="image/webp" srcset="imgs/me.webp">
                <source type="image/png" srcset="imgs/me.png">
                <img width="250" height="256" src="imgs/me.png" alt="Me, Dennis 
            Mai" />
            </picture>
            <figcaption>
                Me, Dennis Mai, in the Wild!
            </figcaption>
        </figure>

        <figure class="side back">
            <picture>
                <source type="image/webp" srcset="imgs/portrait-ascii.webp">
                <source type="image/png" srcset="imgs/portrait-ascii.png">
                <img width="262" height="250" src="imgs/portrait-ascii.png" alt="Me in ASCII characters" />
            </picture>
            <figcaption>
                Me in ASCII, looking semi-professional
            </figcaption>
        </figure>

        <div class="side top">
            <p>Open the door...</p>
            <!-- We need an animation to play here, of a cat face popping out with text stating a cat fact and thanking the user for subscribing. Another button to opt op shows the animation again with another cat fact, and opting out a 2nd time makes a life-time subscription to an e-amil of your choice. -->
            <div class="door">

                <div class="window">
                    <div class="pane"></div>
                    <div class="pane"></div>
                    <div class="pane"></div>
                    <div class="pane"></div>
                </div>
                <div class="doorknob"></div>
                <div class="panel"></div>
                <div class="panel"></div>
            </div>
            <div class="behind-door">
            </div>
        </div>

        <figure class="side bottom">
            <% include ./karate-kick %>
            <figcaption>
                I love this animation. I also love Jiu Jitsu and fancy kicks.
            </figcaption>
        </figure>

        <figure class="side right">
            <picture>
                <source type="image/webp" srcset="imgs/leila.webp">
                <source type="image/png" srcset="imgs/leila.png">
                <img width="250" height="263" src="imgs/leila.png"
                    alt="My daughter Leila at 4 years old. She's super sweet. And a firecracker." />
            </picture>
            <figcaption>
                My daughter is a toddler. 'Nuff said.
            </figcaption>
        </figure>

        <figure class="side left">
            <picture>
                <source type="image/webp" srcset="imgs/fam.webp">
                <source type="image/png" srcset="imgs/fam.png">
                <img width="258" height="250" src="imgs/fam.png"
                    alt="Me and my laides at the beach in Kauai, straight chillin'" />
            </picture>
            <figcaption>
                My family at a sweet little beach on the East Side of Kauai. Good Times.
            </figcaption>
        </figure>

    </div>
</div>