chore: split out styles + only load where needed

src/_includes/partials/now/media-grid.liquid

@@ -1,4 +1,10 @@
 {% if data.size > 0 %}
+  {% capture css %}
+    {% render "../../../assets/styles/widgets/media-grid.css" %}
+  {% endcapture %}
+  <style>
+    {{ css | cssmin }}
+  </style>
   {% assign media = data | normalizeMedia %}
   <h2 class="now__section--header flex--centered">
     {% tablericon icon title %}

src/_includes/partials/now/progress-bar.liquid

@@ -1,4 +1,10 @@
 {% if percentage %}
+{% capture css %}
+  {% render "../../../assets/styles/widgets/media-grid.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 <div class="progress-bar__wrapper">
   <div style="width:{{ percentage }}" class="progress-bar shadow-none flex flex-col whitespace-nowrap justify-center bg-blue-600 dark:bg-blue-400"></div>
 </div>

src/_includes/partials/paginator.liquid

@@ -1,3 +1,9 @@
+{% capture css %}
+  {% render "../../assets/styles/widgets/paginator.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 <nav class="pagination flex--centered">
   {% if pagination.href.previous %}
     <a href="{{ pagination.href.previous }}">

src/_includes/partials/popular-posts.liquid

@@ -1,3 +1,9 @@
+{% capture css %}
+  {% render "../../assets/styles/widgets/popular-posts.css" %}
+{% endcapture %}
+<style>
+  {{ css | cssmin }}
+</style>
 {% assign posts = posts | getPopularPosts: analytics %}
 <div class="popular-posts">
   <h2 class="flex--centered">

src/_includes/partials/webmentions/container.liquid

@@ -1,5 +1,11 @@
 {% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
 {% if mentions %}
+  {% capture css %}
+    {% render "../../../assets/styles/widgets/webmentions.css" %}
+  {% endcapture %}
+  <style>
+    {{ css | cssmin }}
+  </style>
   <div class="webmentions">
     {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'repost-of' %}
     {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'like-of' %}