<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<head>
    {% include head.html %}
</head>
<body>
{% strip %}
    {% if page.image %}
        {% if page.fallback-color %}
            {% assign background-color = page.fallback-color %}
        {% endif %}
        {% assign background-image = page.image %}
    {% else %}
        {% assign background-color = '#d3dbe7' %}
        {% assign background-image = site.hero_image %}
    {% endif %}

    <style type="text/css">
    .hero {
        background-color: {{ background-color }};
        background-image: url('{{ background-image }}');
    }

    {% for size in site.image_breakpoints %}
        {% include functions/hero-responsive-background.css size=size image=background-image %}
    {% endfor %}

    </style>
{% endstrip %}
    <header class="hero">

        <nav class="top-right">
            <a href="/about">ABOUT</a>
        </nav>
         
        <a href="/">
            <div class="title">
                <h1>OUTPUT</h1>
                <p>{{ site.subtitle }}</p>
            </div>
        </a>
    </header>
    <main class="content">
       <div class="container">
           
           {{ content }}
        
        </div>
    </main>
    {% include footer.html %}
</body>
</html>

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<head>
    {% include head.html %}
    {% strip %}
        {% if page.image %}
            {% if page.fallback-color %}
                {% assign background-color = page.fallback-color %}
            {% endif %}
            {% assign background-image = page.image %}
        {% else %}
            {% assign background-color = '#d3dbe7' %}
            {% assign background-image = site.hero_image %}
        {% endif %}

        <style type="text/css">
        .hero {
            background-color: {{ background-color }};
            background-image: url('{{ background-image }}');
        }

        {% for size in site.image_breakpoints %}
            {% include functions/hero-responsive-background.css size=size image=background-image %}
        {% endfor %}

        </style>
{% endstrip %}
</head>
<body>
    <header class="hero">

        <nav class="top-right">
            <a href="/about">ABOUT</a>
        </nav>
         
        <a href="/">
            <div class="title">
                <h1>OUTPUT</h1>
                <p>{{ site.subtitle }}</p>
            </div>
        </a>
    </header>
    <main class="content">
       <div class="container">
           
           {{ content }}
        
        </div>
    </main>
    {% include footer.html %}
</body>
</html>

Move inlined styles to head
Move inlined styles to head
