Related Content Footer

<div class="bg-gray-100 py-10">

    {{!-- component start --}}

    {{!-- 
        When implementing:
        - move inline styling to stylesheet
        - update url
        - update clicky and ga params
        - update text
     --}}

    <style>
        .related-content-footer {
            width: 710px;
        }
    </style>

    <div class="related-content-footer mx-auto">

        <div class="bg-white shadow-sm hover:shadow-md"></div>
            <div class="text-white bg-green-500 p-4 text-xl font-thin leading-snug flex">
                <svg class="pr-2 h-8 w-8 text-wite fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>
                <p>you may also be interested in...</p>
            </div>
            <div class="flex flex-col sm:flex-row bg-white font-thin p-4 text-green-500">
                <div class="sm:w-1/3 px-4 py-2 sm:py-0">
                    <a class="underline" href="http://bolexcollector.com">vacation planning services</a>
                    <p class="text-gray-800 text-sm">Local organizations and companies offering vacation planning services, tours, and packages.</p>
                </div>
                <div class="sm:w-1/3 px-4 py-2 sm:py-0">
                    <a class="underline" href="https://bing.com">local organizations</a>
                    <p class="text-gray-800 text-sm">Organizations and associations that help promote and protect the mountain parks for the benefit of residents and...</p>
                </div>
                <div class="sm:w-1/3 px-4 py-2 sm:py-0">
                    <a class="underline" href="https://webmarks.design">kananaskis country</a>
                    <p class="text-gray-800 text-sm">Information about the provincial parks and recreation areas, important phone numbers, etc.</p>
                </div>
            </div>
        </div>

    </div>

    {{!-- component end --}}

</div>