{% require_css %}
/* <!-- Gallery CSS --> */
<style>
.full-link span { height: 56px; }
    {# Make Gallery Three Wide and add padding arround it. #}
    .gallery { 
        padding: 2em;
        columns: 2;
        width: 100%;
    } 
    
    .gallery__image {
        display: block;
        max-width: 100%;
        margin-bottom: 1em;
    }
    {# Make sure the gallery overlay takes up the entire screen and sits on top of everything. #}
    .gallery__overlay {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.8);
        z-index: 100000;
    }
    {# Close Button #}
    .gallery__overlay .close {
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: transparent;
        color: #fff;
        font-size: 2rem;
    }
    {# Center the image and text in one fell swoop. We use translate to ensure the image is always centered. #}
    .gallery__image--wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
    
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 1000px;
    
        color: #fff; 
    }
</style>
{% end_require_css %}