[!][@on minify]
[=content-]
<div class="centered-container">
    <div style="display: inline-flex;flex-direction: column;align-items: stretch;">
        [f servicepages page]
            <a class="servicelink">
                <div class="serviceitem">
                    <span>[^page.title]</span>
                    <p>
                        [^page.quickdesc]
                    </p>
                </div>
            </a>
        [/]
    </div>
</div>
<style>
    .servicelink {
        text-decoration: none;
        color: black;
    }
    .serviceitem {
        background-color: white;
        border-radius: 20px 0px 20px 0px;
        padding: 20px;
        margin: 20px;
        text-align: left;
        box-shadow: 6px 6px 2px red;
        transition: box-shadow 0.5s;
        max-width: 1000px;
    }
    .serviceitem > span {
        font-size: 1.5em;
    }
    .serviceitem > p {
        border-left: 4px solid green;
        padding: 10px;
    }
    .serviceitem:hover {
        box-shadow: 3px 3px 0px red;
    }
</style>
[/]
[=title "Services"]
[#templates/default.html]