{% capture svgClass %}flex-shrink-0 text-{{ color }}-600{% endcapture %}

<div class=“w-full mx-auto flex justify-between space-x-4”>

<!– prev –> {% if page.next and page.next.id %}

<a class="w-1/2 p-4 flex items-center rounded-lg bg-{{ color }}-50 bg-opacity-75" href="{{ page.next.id | relative_url }}">
  {% include svg-prev.html class=svgClass %}
  <span class="ml-4 text-black">{{ page.next.title | default: "" }}</span>
</a>

{% else %}

<a class="w-1/2 p-4 opacity-0"></a>

{% endif %}

<!– next –> {% if page.previous and page.previous.id %}

<a class="w-1/2 p-4 flex flex-row-reverse items-center rounded-lg bg-{{ color }}-50 bg-opacity-75" href="{{ page.previous.id | relative_url }}">
  {% include svg-next.html class=svgClass %}
  <span class="mr-4 text-black">{{ page.previous.title | default: "" }}</span>
</a>

{% else %}

<a class="w-1/2 p-4 opacity-0"></a>

{% endif %}

</div>