<style type="text/css">
  .template-404 .title + * {
    margin-top: 1rem;
  }

  @media screen and (min-width: 750px) {
    .template-404 .title + * {
      margin-top: 2rem;
    }
  }
</style>

<div class="template-404 page-width page-margin center">
  <dotlottie-player
    id="SHX-feedback-modal-lottie2"
    src="{{ 'lottie_404.lottie' | asset_url }}"
    background="transparent"
    speed="1"
    autoplay
    loop="true"
    style="width: 300px; height: 300px; margin: 0 auto;"
    direction="1"
    mode="bounce"></dotlottie-player>

  <p>
    {{ 'templates.404.subtext' | t }}
  </p>
  <h1 class="title">
    {{ 'templates.404.title' | t }}
  </h1>
  <a href="{{ routes.all_products_collection_url }}" class="button">
    {{ 'general.continue_shopping' | t }}
  </a>
</div>
