<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.403.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.403.text'|trans({}, 'cms') }}
        </p>
        <p class="mt-1 text-xs text-gray-500 sm:text-sm sm:max-w-xl sm:mx-auto md:mt-2 md:text-base lg:mx-0">
            {{ 'error.403.help'|trans({}, 'cms') }}
        </p>
        <div class="mt-10 flex items-center justify-center gap-x-6">
            <a data-turbo="false"
               href="{{ path('contao_frontend_logout') }}"
               class="rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">{{ 'error.403.logout'|trans({}, 'cms') }}</a>
            <a href="{{ 'mailto:'~adminEmail }}" class="text-sm font-semibold text-gray-900">{{ 'error.403.contactAdmin'|trans({}, 'cms') }} <span aria-hidden="true">&rarr;</span></a>
        </div>
        <img class="mt-10 sm:mt-16 h-auto w-full max-w-xs" src="{{ asset('images/error403.svg', 'ferienpass_core') }}"
             alt=""/>
    </div>

</div>