Liquid not rendering on seperate pages - jekyll

Question

I've recently been having this problem where includes on separate pages that are not loading correctly.
This is my downloads.html:
---
layout: default
---
{% if site.downloads %}
<div class="my-6">{% include downloads.html %}</div>
{% else %}
<h2>Downloads</h2>
<p>There are no downloads at the time. Come back later!</p>
{% endif %}
But what all that shows are:
Here is my _layouts/default.html:
{% include header.html %}
{% if site.layout == 'stacked' %}
<div class="container-lg py-6 p-responsive text-center">
{% include masthead.html metadata=false %}
<div class="container-md f4 text-left border rounded-2 bg-white p-3 p-sm-5 mt-6">
<p class="f5">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:#0366d6 aria-label:Home %}Home</p>
<h1 class="f00-light lh-condensed mb-5">{{ page.title }}</h1>
{{ content }}
</div>
</div>
{% else %}
<div class="d-md-flex min-height-full {% unless site.style == 'dark' %}border-md-bottom{% endunless %}">
<div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
{% include masthead.html metadata=true %}
</div>
<div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7 border-top border-md-top-0 bg-gray-light" {% if site.style == 'dark' %}style="background-color: #2f363d !important"{% endif %}>
<div class="mx-auto" style="max-width: 900px;">
<div class="f4 {% if site.style == 'dark' %}text-white{% endif %} mb-6">
<div class="f4 {% if site.style == 'dark' %}text-white{% endif %}">
<p class="f5">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Home %}Home</p>
<h1 class="f00-light lh-condensed mb-5">{{ page.title }}</h1>
{{ content }}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% include footer.html %}
Here is my _includes/downloads.html:
<h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>Downloads</h2>
<p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">Most of my downloads/others on GitHub.</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
{% for download in site.downloads %}
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include download-card.html %}
</div>
{% endfor %}
</div>
Here is my _includes/download-card.html:
{% if download.download_url %}
<a href="{{ download.download_url }}" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
{% if download.image_url %}
<img src="{{ download.image_url }}" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="{{ download.name }}">
{% else %}
<div
class="bg-blue-light f4 text-gray-light text-bold rounded-1 flex-shrink-0 text-center mx-auto mb-3"
style="width:64px; height:64px; line-height:64px;"
>
#
</div>
{% endif %}
<p class="f3 lh-condensed text-center link-gray-dark mb-0 mt-1">{{ download.name }}</p>
{% if download.description %}
<p class="f5 text-gray text-center mb-0 mt-1">{{ download.description }}</p>
{% endif %}
</a>
{% endif %}
And here is my _config.yml:
layout: sidebar
style: dark
plugins:
- jekyll-octicons
- jekyll-github-metadata
- jemoji
permalink: /:year/:month/:day/:title/
defaults:
- scope:
path: ""
type: "posts"
values:
layout: "post"
downloads:
- name: Test
description: This is just a test item
image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
download_url: https://example.com
It renders perfectly fine on my home layout:
{% include header.html %}
{% if site.layout == 'stacked' %}
<div class="container-lg py-6 p-responsive text-center">
{% include masthead.html metadata=true %}
<div {% if site.style == 'dark' %}class="text-white"{% endif %}>
{{ content }}
</div>
{% if site.topics %}
<div class="my-6">
{% include interests.html %}
</div>
{% endif %}
{% unless posts_total == 0 %}
<div class="my-6">
{% include thoughts.html %}
</div>
{% endunless %}
</div>
{% else %}
<div class="d-md-flex min-height-full {% unless site.style == 'dark' %}border-md-bottom{% endunless %}">
<div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
{% include masthead.html metadata=true %}
</div>
<div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7 border-top border-md-top-0 bg-gray-light" {% if site.style == 'dark' %}style="background-color: #2f363d !important"{% endif %}>
<div class="mx-auto" style="max-width: 900px;">
{% unless content == "" %}
<div class="f4 {% if site.style == 'dark' %}text-white{% endif %} mb-6">
{{ content }}
</div>
{% endunless %}
{% if site.topics %}
{% include interests.html %}
{% endif %}
{% unless posts_total == 0 %}
{% include thoughts.html %}
{% endunless %}
</div>
</div>
</div>
{% endif %}
{% include footer.html %}
Thanks if you can help. I really don't know why this is happening.