---
title: 404
layout: default
permalink: /404.html
image: /assets/img/404.jpg
---
{% capture css %}
  {% render "../assets/styles/pages/404.css" %}
{% endcapture %}
<style>{{ css }}</style>
<div class="four-oh-four__wrapper">
  {% capture fallbackIcon %}{% tablericon "photo" title %}{% endcapture %}
  {% image './src/assets/img/404.jpg', title, 'image__banner', 'eager', 'banner', fallbackIcon %}
  <div class="text-center">
    <h2 class="page__header">{{ title }}</h2>
    <h3>What kind of idiots do you have working here?</h3>
    <div class="flex justify-center">
      <a href="/" class="pill--button">
        {% tablericon "receipt-2" "Receipt" %} Skip out on the room service bill
      </a>
    </div>
  </div>
  <hr class="large__spacing" />
  {% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    plausible('404', { props: { path: document.location.pathname } })
  })
</script>
