feat: add audio-tactile card diagram to cards page

src/_data/translations.json

@@ -1,13 +1,14 @@
 {
     "en-CA": {
         "approaches": "approaches",
+        "articleContentsSummary": "Article Contents",
         "audioTactileCards": "cards",
-        "perspectives": "perspectives",
-        "techniques": "techniques",
+        "audioTactileCardDiagramAltText": "Example of a card with three elements being pointed out by arrows: the recommendation code on the top-left, the recommendation in the centre of the card, and an interactive button bottom-centre that indicates there is additional information on the card.",
         "brandAltText": "Inclusive Learning Design Handbook - Home",
-        "menu": "Menu",
         "collapseAll": "collapse all",
         "expandAll": "expand all",
-        "articleContentsSummary": "Article Contents"
+        "menu": "Menu",
+        "perspectives": "perspectives",
+        "techniques": "techniques"
     }
 }

src/_includes/layouts/audio-tactile-cards.njk

@@ -13,6 +13,9 @@
 
         {% block content %}
             {{ content | safe }}
+            <div class="audio-tactile__diagram">
+                {%- svg_sprite "audio-tactile-card-diagram", translations[lang].audioTactileCardDiagramAltText -%}
+            </div>
         {% endblock %}
 
         {%- include "partials/components/sections-control.njk" -%}

src/assets/styles/pages/_audio-tactile.scss

@@ -30,6 +30,17 @@
         margin-inline: auto;
     }
 
+    .audio-tactile__diagram {
+        text-align: center;
+
+        svg {
+            height: 36.0625rem;
+            max-height: 77vw;
+            max-width: 100%;
+            width: 40.3125rem;
+        }
+    }
+
     .audio-tactile__sections {
         list-style: none;
         margin: 0;