<div class="footer">
  <div class="container">
    <div class="row align-items-start">
      <div class="col-2 align-self-start">
        <div class="footer-inner">
          <h2 class="footer-title">
            {% if site.retro %}
            <div class="logo">
              <a href="{{ site.baseurl }}"><img alt="{{ site.title }}" src="{{ site.logo | relative_url }}" /></a>
            </div>
            {% else %}
            <div class="logo">
              <a href="{{ site.baseurl }}"><img width="{{ site.logo.desktop_footer_width }}" height="{{ site.logo.desktop_footer_height }}" alt="{{ site.title }}" src="{{ site.logo.desktop | relative_url }}" /></a>
            </div>
            <div class="logo-mobile">
              <a href="{{ site.baseurl }}"><img width="{{ site.logo.mobile_footer_width }}" height="{{ site.logo.mobile_footer_height }}" alt="{{ site.title }}" src="{{ site.logo.mobile | relative_url }}" /></a>
            </div>
            {% endif %}
          </h2>
        </div>
      </div>
      <div class="col-10 align-self-center">
        <div class="footer-inner">
          <div class="footer-contact-details">
            {{ site.contact-details }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
