From 7271aea1aa5747833f8df25fb5015fc015ba5845 Mon Sep 17 00:00:00 2001
From: Tibor Leupold <tibor.leupold@torchbox.com>
Date: Fri, 20 Jan 2023 16:44:20 -0800
Subject: [PATCH] Fix template indentation

---
 .../fragments/blocks/card_grid_block.html     | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/network-api/networkapi/templates/fragments/blocks/card_grid_block.html b/network-api/networkapi/templates/fragments/blocks/card_grid_block.html
index 281e5126c..254426c1f 100644
--- a/network-api/networkapi/templates/fragments/blocks/card_grid_block.html
+++ b/network-api/networkapi/templates/fragments/blocks/card_grid_block.html
@@ -2,15 +2,15 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
 {% block block_content %}
-  <div class="tw-row">
-    {% for block in self.cards %}
-      {% with card=block count=self.cards|length %}
-        <div class="tw-px-4 small:tw-w-full {% if count > 2 %} large:tw-w-1/3 medium:tw-w-1/2 {% else %} medium:tw-w-1/2 {% endif %} tw-mb-5">
-          <div class="card-regular tw-h-full tw-flex tw-flex-col">
+    <div class="tw-row">
+        {% for block in self.cards %}
+            {% with card=block count=self.cards|length %}
+                <div class="tw-px-4 small:tw-w-full {% if count > 2 %} large:tw-w-1/3 medium:tw-w-1/2 {% else %} medium:tw-w-1/2 {% endif %} tw-mb-5">
+                    <div class="card-regular tw-h-full tw-flex tw-flex-col">
 
-            <div class="tw-w-full tw-aspect-video tw-bg-gray-05">
-              <picture>
-                {% comment %}
+                        <div class="tw-w-full tw-aspect-video tw-bg-gray-05">
+                            <picture>
+                                {% comment %}
                   Because of the card layout, the image size is not increasing consistently with the device size.
                   The image sizes are based on the layout on a banner page with wide layout.
                   The designed image aspect ratio is 16:9.
@@ -25,35 +25,35 @@
                   The picture element will use the first source with a matching media query.
                   Using min-media queries, we need to list the breakpoints in decending order, otherwise larger screens will always use the first listed (because that min-width query would be fulfilled).
                 {% endcomment %}
-                {% image card.image fill-512x288 as img_small %}
-                {% image card.image fill-1024x576 as img_small_2x %}
-                {% image card.image fill-336x189 as img_medium %}
-                {% image card.image fill-672x378 as img_medium_2x %}
-                {% image card.image fill-448x252 as img_large %}
-                {% image card.image fill-896x504 as img_large_2x %}
-                {% image card.image fill-592x333 as img_xlarge %}
-                {% image card.image fill-1184x666 as img_xlarge_2x %}
-                <source media="(min-width: 1200px)" srcset="{{ img_xlarge.url }}, {{ img_xlarge_2x.url }} 2x" />
-                <source media="(min-width: 992px)" srcset="{{ img_large.url }}, {{ img_large_2x.url }} 2x" />
-                <source media="(min-width: 768px)" srcset="{{ img_medium.url }}, {{ img_medium_2x.url }} 2x" />
-                <source media="(max-width: 767px)" srcset="{{ img_small.url }}, {{ img_small_2x.url }} 2x" />
-                <img class="tw-w-full tw-h-full tw-object-cover" src="{{ img_small.url }}" alt="{{ img_small.alt_text }}" />
-              </picture>
-            </div>
+                                {% image card.image fill-512x288 as img_small %}
+                                {% image card.image fill-1024x576 as img_small_2x %}
+                                {% image card.image fill-336x189 as img_medium %}
+                                {% image card.image fill-672x378 as img_medium_2x %}
+                                {% image card.image fill-448x252 as img_large %}
+                                {% image card.image fill-896x504 as img_large_2x %}
+                                {% image card.image fill-592x333 as img_xlarge %}
+                                {% image card.image fill-1184x666 as img_xlarge_2x %}
+                                <source media="(min-width: 1200px)" srcset="{{ img_xlarge.url }}, {{ img_xlarge_2x.url }} 2x" />
+                                <source media="(min-width: 992px)" srcset="{{ img_large.url }}, {{ img_large_2x.url }} 2x" />
+                                <source media="(min-width: 768px)" srcset="{{ img_medium.url }}, {{ img_medium_2x.url }} 2x" />
+                                <source media="(max-width: 767px)" srcset="{{ img_small.url }}, {{ img_small_2x.url }} 2x" />
+                                <img class="tw-w-full tw-h-full tw-object-cover" src="{{ img_small.url }}" alt="{{ img_small.alt_text }}" />
+                            </picture>
+                        </div>
 
-            <div class="tw-flex tw-flex-1">
-              <div class="tw-border-b-4 tw-border-gray-05 tw--mt-5 tw-bg-white tw-relative tw-mx-2 medium:tw-mx-4 tw-p-4 tw-w-full tw-flex tw-flex-col">
-                <h3 class="tw-h3-heading tw-mb-2">{{ card.title }}</h3>
-                <p>{{ card.body }}</p>
-                {% if card.link_label and card.link_url %}
-                  <a class="tw-cta-link tw-mb-2" href="{{ card.link_url }}">{{ card.link_label }}</a>
-                {% endif %}
-              </div>
-            </div>
+                        <div class="tw-flex tw-flex-1">
+                            <div class="tw-border-b-4 tw-border-gray-05 tw--mt-5 tw-bg-white tw-relative tw-mx-2 medium:tw-mx-4 tw-p-4 tw-w-full tw-flex tw-flex-col">
+                                <h3 class="tw-h3-heading tw-mb-2">{{ card.title }}</h3>
+                                <p>{{ card.body }}</p>
+                                {% if card.link_label and card.link_url %}
+                                    <a class="tw-cta-link tw-mb-2" href="{{ card.link_url }}">{{ card.link_label }}</a>
+                                {% endif %}
+                            </div>
+                        </div>
 
-          </div>
-        </div>
-      {% endwith %}
-    {% endfor %}
-  </div>
+                    </div>
+                </div>
+            {% endwith %}
+        {% endfor %}
+    </div>
 {% endblock %}