<div class="max-w-5xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 py-4 sm:py-6 md:py-12 lg:px-16 flex items-center justify-center flex-col h-full">

    <div class="flex-1 flex flex-col items-center justify-center text-center px-2 sm:px-4 py-6">
        <h1 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-4xl sm:leading-none md:text-5xl">
            {{ 'error.404.title'|trans({}, 'cms') }}
        </h1>
        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
            {{ 'error.404.text'|trans({}, 'cms') }}
        </p>
        <a href="/" is="button-default" class="mt-4">
            <i is="icon-home" class="w-5 h-5 mr-2"></i>{{ 'error.404.backToHome'|trans({}, 'cms') }}
        </a>
        <img class="mt-10 sm:mt-16 h-auto w-full max-w-xs" src="{{ asset('images/error404.svg', 'ferienpass_core') }}"
             alt=""/>
    </div>

</div>
