@nationalarchives/frontend 0.1.57 → 0.1.59

package/nationalarchives/components/hero/fixtures.json

@@ -9,7 +9,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
     },
     {
       "name": "with a title",
@@ -20,7 +20,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>"
     },
     {
       "name": "with a different size title",
@@ -32,7 +32,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-m tna-hero__heading\">Title</h1></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-m tna-hero__heading\">Title</h1></div></div></div></figure></header>"
     },
     {
       "name": "with a different level title",
@@ -44,7 +44,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h2 class=\"tna-heading-xl tna-hero__heading\">Title</h2></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h2 class=\"tna-heading-xl tna-hero__heading\">Title</h2></div></div></div></figure></header>"
     },
     {
       "name": "with a title and supertitle",
@@ -56,7 +56,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><hgroup class=\"tna-hgroup-xl tna-hero__heading\"><h1 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Title</span>Title</h1></hgroup></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><hgroup class=\"tna-hgroup-xl tna-hero__heading\"><p class=\"tna-hgroup__supertitle\">Title</p><h1 class=\"tna-hgroup__title\">Title</h1></hgroup></div></div></div></figure></header>"
     },
     {
       "name": "with text",
@@ -67,7 +67,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
     },
     {
       "name": "with body",
@@ -78,7 +78,7 @@
         "imageWidth": 499,
         "imageHeight": 333
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><p class=\"tna-large-paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><p class=\"tna-large-paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
     },
     {
       "name": "accent style",
@@ -91,7 +91,7 @@
         "imageHeight": 333,
         "style": "accent"
       },
-      "html": "<header class=\"tna-hero tna-hero--accent\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero tna-background-accent\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
     },
     {
       "name": "contrast style",
@@ -104,7 +104,7 @@
         "imageHeight": 333,
         "style": "contrast"
       },
-      "html": "<header class=\"tna-hero tna-hero--contrast\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero tna-background-contrast\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
     },
     {
       "name": "tint style",
@@ -117,7 +117,7 @@
         "imageHeight": 333,
         "style": "tint"
       },
-      "html": "<header class=\"tna-hero tna-hero--tint\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero tna-background-tint\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
     },
     {
       "name": "shifted",
@@ -143,7 +143,7 @@
         "imageHeight": 333,
         "style": "shift"
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
     },
     {
       "name": "split",
@@ -170,7 +170,20 @@
         "style": "accent",
         "layout": "split"
       },
-      "html": "<header class=\"tna-hero tna-hero--accent tna-hero--split\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero tna-background-accent tna-hero--split\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
+    },
+    {
+      "name": "narrow",
+      "options": {
+        "title": "Title",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "narrow": true
+      },
+      "html": "<header class=\"tna-hero tna-hero--narrow\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>"
     },
     {
       "name": "with caption",
@@ -182,7 +195,7 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>"
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>"
     },
     {
       "name": "image with caption",
@@ -193,7 +206,7 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
     },
     {
       "name": "with alternative image sources",
@@ -210,7 +223,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
     },
     {
       "name": "with alternative image sources with media queries",
@@ -228,7 +241,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
     },
     {
       "name": "with alternative image sources with different width/heights",
@@ -247,7 +260,37 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+      "html": "<div class=\"tna-hero\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+    },
+    {
+      "name": "with actions",
+      "options": {
+        "title": "Title",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "actions": [
+          {
+            "text": "Action 1",
+            "href": "#"
+          },
+          {
+            "text": "Action 2",
+            "href": "#",
+            "icon": "globe"
+          },
+          {
+            "text": "Action 3",
+            "href": "#",
+            "title": "Go and do the action",
+            "icon": "chevron-right",
+            "rightAlignIcon": true
+          }
+        ]
+      },
+      "html": "<header class=\"tna-hero\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class=\"tna-button-group tna-hero__actions\"><a href=\"#\" class=\"tna-button\">Action 1</a><a href=\"#\" class=\"tna-button\"><i class=\"fa-solid fa-globe\" aria-hidden=\"true\"></i>Action 2</a><a href=\"#\" class=\"tna-button tna-button--icon-right\" title=\"Go and do the action\"><i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"></i>Action 3</a></div></div></div></div></figure></header>"
     },
     {
       "name": "with classes",
@@ -273,7 +316,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-hero \" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+      "html": "<div class=\"tna-hero\" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
     }
   ]
 }

package/nationalarchives/components/hero/hero.css

@@ -1 +1 @@
-.tna-hero--contrast,.tna-hero--accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--shift:not(.tna-hero--accent):not(.tna-hero--tint) .tna-hero__content-inner,.tna-hero--split:not(.tna-hero--accent):not(.tna-hero--tint){--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-hero--accent):not(.tna-hero--tint) .tna-hero__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero--tint{--background: var(--background-tint);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero--accent,.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero--accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain){border-color:var(--contrast-background, #1e1e1e)}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;top:8px;right:8px;z-index:2;font-size:0;line-height:1.5rem;text-align:center;list-style:none;border-radius:100%;cursor:pointer;border:4px var(--background, #f4f4f4) solid}.tna-hero__details-summary:hover{color:var(--background, #f4f4f4);background-color:var(--font-base, #343338)}.tna-hero__details-summary-icon{font-size:1.25rem;font-weight:700;font-style:normal;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem}.tna-hero__image{position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4)}.tna-hero--shift{margin-bottom:48px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0}@media(max-width: 48em){.tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0}.tna-hero__body{margin-top:16px}.tna-hero--shift{margin-bottom:0}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}/*# sourceMappingURL=hero.css.map */
+.tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--split:not(.tna-background-accent,.tna-background-tint),.tna-hero--shift:not(.tna-background-accent,.tna-background-tint) .tna-hero__content-inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero--details-cutout .tna-hero__details::before{--background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: #ededed;--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148);background-color:var(--background, #f4f4f4)}@media(prefers-contrast: more){.tna-hero--details-cutout .tna-hero__details::before{--background: rgb(255, 255, 255);--background-tint: #ddd;--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: #ededed;--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-hero--details-cutout .tna-hero__details::before,.tna-hero--details-cutout .tna-template--system-theme .tna-hero__details::before{--background: #212223;--background-tint: #323334;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.51);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: #ededed;--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme .tna-hero--details-cutout .tna-hero__details::before,.tna-hero--details-cutout .tna-template--system-theme .tna-hero__details::before{--background: #111;--background-tint: #323334;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: #ededed;--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-template--dark-theme .tna-hero--details-cutout .tna-hero__details::before,.tna-hero--details-cutout .tna-template--dark-theme .tna-hero__details::before{--background: #212223;--background-tint: #323334;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.51);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: #ededed;--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template--dark-theme .tna-hero--details-cutout .tna-hero__details::before,.tna-hero--details-cutout .tna-template--dark-theme .tna-hero__details::before{--background: #111;--background-tint: #323334;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(1, 1, 1);--input-border: rgb(255, 255, 255);--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: #ededed;--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;top:8px;right:8px;z-index:2;font-size:0;line-height:1.5rem;text-align:center;list-style:none;border-radius:100%;cursor:pointer;border:4px var(--background, #f4f4f4) solid}.tna-hero__details-summary:hover{color:var(--background, #f4f4f4);background-color:var(--font-base, #343338)}.tna-hero__details-summary-icon{font-size:1.25rem;font-weight:700;font-style:normal;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem}.tna-hero__image{position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4)}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0}.tna-hero--shift{margin-bottom:48px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--narrow .tna-hero__figure{min-height:max(96px,20rem);padding-top:48px;padding-bottom:48px}.tna-hero--details-cutout .tna-hero__details::before{content:"";width:3rem;height:3rem;position:absolute;top:0;right:0;z-index:1;border-radius:0% 0 0% 50%;background-color:var(--background, #f4f4f4)}.tna-hero--details-cutout .tna-hero__details[open]::before{display:none}@media(max-width: 48em){.tna-hero .tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0}.tna-hero__body{margin-top:16px}.tna-hero--shift{margin-bottom:0}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}/*# sourceMappingURL=hero.css.map */

package/nationalarchives/components/hero/hero.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAiMA,gUACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxJA,4CAJA,gCCgCA,wBDuIF,uEAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAjLF,4CAJA,iCAiMF,gBACE,qCA9LA,4CAJA,gCA6MF,6CACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAlNA,4CAJA,gCE1BE,8EF6DE,iDEtDJ,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,UAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,QACA,UACA,UAEA,YACA,mBACA,kBAEA,gBAEA,mBAEA,eFDE,4CEOF,iCFrCF,iCAIA,2CEwCA,gCACE,kBACA,gBACA,kBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCxGF,eD+GA,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SF1FJ,gDE+FE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aFhIF,4CE2IA,iBACE,mBAGF,0CACE,kBACA,SAcF,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UD7JF,wBCiKE,kBACE,gBACA,UAEA,sBAGF,mBACE,QAYF,+DAEE,WACA,eAEA,OAGF,iBACE,WAEA,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAMF,gBACE,gBAGF,iBACE,gBAGF,0CACE,gBAGF,mCACE,gBACA,cACA,iBAGF,oCACE,WACA,mBAGF,0CACE,iBACA,qBF6FJ,8BExFE,gDFxPE,+CCEJ,mDC4PI,iBF9PA,8CEgQE,aAGF,yBACE,aFsEN,+BElFE,gDFxPE,+CCEJ,oDC4PI,iBF9PA,8CEgQE,aAGF,yBACE","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\n    \"keyline\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\n    \"keyline-dark\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\n    \"accent-border\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\n    \"form-error\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n    solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark(\"form-error\");\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark(\"form-error\");\n    }\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark(\"form-error\");\n\n    @media (prefers-contrast: more) {\n      @include colour-css-vars-high-contrast-dark(\"form-error\");\n    }\n  }\n\n  @include colour-background(\"background\");\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accent-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accent-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %black-accent;\n  @extend %accent-lighter-text;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"pink\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %pink-accent;\n  @extend %accent-lighter-text;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"orange\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %orange-accent;\n  @extend %accent-lighter-text;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"green\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %green-accent;\n  @extend %accent-lighter-text;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"blue\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %blue-accent;\n  @extend %accent-lighter-text;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n\n%hide-on-print {\n  @media print {\n    display: none;\n  }\n}\n\n@mixin hide-on-print() {\n  @extend %hide-on-print;\n}\n","@use \"sass:math\";\n\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$padding-units-top: 10 !default;\n$padding-units-bottom: 2 !default;\n$shift-units: 5 !default;\n\n.tna-hero {\n  &--contrast {\n    @include colour.contrast;\n  }\n\n  &--tint {\n    @include colour.tint;\n  }\n\n  &--accent {\n    @include colour.accent;\n\n    .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) {\n      @include colour.contrast;\n\n      @include colour.colour-border(\"contrast-background\");\n    }\n  }\n\n  &__figure {\n    min-height: clamp(\n      #{spacing.space($padding-units-top + $padding-units-bottom)},\n      calc(40vw - #{spacing.space($padding-units-top + $padding-units-bottom)}),\n      50rem\n    );\n    margin: 0;\n    padding-top: spacing.space($padding-units-top);\n    padding-bottom: spacing.space($padding-units-bottom);\n\n    display: flex;\n    align-items: flex-end;\n\n    position: relative;\n  }\n\n  &__caption {\n    width: 100%;\n\n    overflow: visible;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 5;\n  }\n\n  &__details {\n    width: 100%;\n\n    overflow: visible;\n  }\n\n  &__details-summary {\n    width: 1.5rem;\n    height: 1.5rem;\n\n    position: absolute;\n    top: spacing.space(0.5);\n    right: spacing.space(0.5);\n    z-index: 2;\n\n    font-size: 0;\n    line-height: 1.5rem;\n    text-align: center;\n\n    list-style: none;\n\n    border-radius: 100%;\n\n    cursor: pointer;\n\n    @include colour.accent;\n\n    @include colour.colour-border(\"background\", 4px);\n\n    &:hover {\n      @include colour.colour-font(\"background\");\n\n      @include colour.colour-background(\"font-base\");\n    }\n  }\n\n  &__details-summary-icon {\n    font-size: 1.25rem;\n    font-weight: 700;\n    font-style: normal;\n    text-transform: lowercase;\n  }\n\n  &__information {\n    width: 45rem;\n    max-width: 75vw;\n    padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n      spacing.space(1);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n\n    @include colour.contrast;\n\n    @include typography.relative-font-size(16);\n  }\n\n  &__image {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    img {\n      width: 100%;\n      height: 100%;\n\n      object-fit: cover;\n    }\n  }\n\n  &__details[open] &__details-summary {\n    @include colour.contrast;\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      width: 1.5rem;\n      height: 0.125rem;\n\n      display: block;\n\n      position: absolute;\n      top: 50%;\n      left: 50%;\n\n      @include colour.colour-background(\"font-dark\");\n    }\n\n    &::before {\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    &::after {\n      transform: translate(-50%, -50%) rotate(-45deg);\n    }\n\n    &:hover {\n      &::before,\n      &::after {\n        height: 0.25rem;\n      }\n    }\n\n    &-icon {\n      font-size: 0;\n    }\n  }\n\n  &__inner {\n    position: relative;\n    z-index: 4;\n  }\n\n  &:not(#{&}--accent):not(#{&}--tint) &__inner {\n    @include colour.contrast-on-mobile;\n  }\n\n  &__content {\n  }\n\n  &__content-inner {\n    padding: spacing.space(2);\n\n    @include colour.colour-background(\"background\");\n  }\n\n  &__heading {\n  }\n\n  &__body {\n  }\n\n  &--shift {\n    margin-bottom: spacing.space($shift-units - $padding-units-bottom);\n  }\n\n  &--shift &__content-inner {\n    position: relative;\n    top: spacing.space($shift-units);\n  }\n\n  &--shift:not(#{&}--accent):not(#{&}--tint) &__content-inner {\n    @include colour.contrast;\n  }\n\n  &--split {\n  }\n\n  &--split:not(#{&}--accent):not(#{&}--tint) {\n    @include colour.contrast;\n  }\n\n  &--split &__figure {\n    min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem);\n    padding-top: spacing.space(2);\n    padding-bottom: spacing.space(2);\n\n    align-items: center;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__information {\n    max-width: 50%;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__image {\n    left: 50%;\n  }\n\n  &--split &__content {\n    width: 50%;\n    padding-right: grid.gutter-width();\n  }\n\n  &--split &__content-inner {\n    padding: 0;\n  }\n\n  @include media.on-mobile {\n    &__figure {\n      min-height: auto;\n      padding: 0;\n\n      flex-direction: column;\n    }\n\n    &__caption {\n      order: 2;\n    }\n\n    &__details {\n    }\n\n    &__details-summary {\n    }\n\n    &__details-summary-icon {\n    }\n\n    &__information,\n    &--split &__information {\n      width: auto;\n      max-width: none;\n\n      left: 0;\n    }\n\n    &__image {\n      width: 100%;\n\n      position: static;\n\n      order: 1;\n\n      img {\n        height: auto;\n      }\n    }\n\n    &__inner {\n      order: 3;\n    }\n\n    &__content {\n    }\n\n    &__content-inner {\n      padding-right: 0;\n      padding-left: 0;\n    }\n\n    &__heading {\n    }\n\n    &__body {\n      margin-top: spacing.space(1);\n    }\n\n    &--shift {\n      margin-bottom: 0;\n    }\n\n    &--shift &__content-inner {\n      position: static;\n    }\n\n    &--split &__figure {\n      min-height: auto;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    &--split &__content {\n      width: 100%;\n      padding-right: grid.gutter-width-half();\n    }\n\n    &--split &__content-inner {\n      padding-top: spacing.space(2);\n      padding-bottom: spacing.space(2);\n    }\n  }\n\n  @include colour.on-high-contrast-and-forced-colours {\n    &__information,\n    &__content-inner {\n      @include colour.colour-border(\"keyline-dark\", 1px);\n    }\n\n    @include media.on-mobile {\n      &__inner {\n        @include colour.colour-border(\"keyline-dark\", 1px);\n        border-top: 0;\n      }\n\n      &__content-inner {\n        border: none;\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include relative-font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include relative-font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include relative-font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include relative-font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include relative-font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include relative-font-size($font-size-medium);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAgKA,wOACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAxHA,4CAJA,gCCgCA,wBDwGF,4EAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAnJF,4CAJA,iCAgLF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCAvLA,4CAJA,gCAmPF,qDAxRM,0jDAyCJ,4CAkPA,+BAHF,qDAxQM,oiDAgRF,mCADF,kKAvRI,4mDA4RF,+DALF,kKAvQI,qlDAiRJ,8JAjSI,2mDAoSF,+BAHF,8JAjRI,qlDEvBJ,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,UAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,QACA,UACA,UAEA,YACA,mBACA,kBAEA,gBAEA,mBAEA,eFgBE,4CEVF,iCFpBF,iCAIA,2CEuBA,gCACE,kBACA,gBACA,kBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCvFF,eD8FA,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SFzEJ,gDE8EE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aF/GF,4CEiIA,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UAGF,iBACE,mBAGF,0CACE,kBACA,SAUF,oCACE,2BACA,iBACA,oBAIA,qDACE,WAGA,WACA,YAEA,kBACA,MACA,QACA,UAEA,0BFjMJ,4CEsMI,2DACE,aD3KN,wBCiLE,4BACE,gBACA,UAEA,sBAGF,mBACE,QAYF,+DAEE,WACA,eAEA,OAGF,iBACE,WAEA,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAMF,gBACE,gBAGF,iBACE,gBAGF,0CACE,gBAGF,mCACE,gBACA,cACA,iBAGF,oCACE,WACA,mBAGF,0CACE,iBACA,qBF8FJ,8BEzFE,gDFxQE,+CCEJ,mDC4QI,iBF9QA,8CEgRE,aAGF,yBACE,aFuEN,+BEnFE,gDFxQE,+CCEJ,oDC4QI,iBF9QA,8CEgRE,aAGF,yBACE","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\n    \"keyline\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\n    \"keyline-dark\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\n    \"accent-border\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\n    \"form-error\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n    solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n  --accent-list-marker: var(--accent-font-base);\n  --accent-border: var(--accent-font-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n  --accent-border: var(--font-base);\n  --accent-list-marker: var(--font-base);\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark(\"form-error\");\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark(\"form-error\");\n    }\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark(\"form-error\");\n\n    @media (prefers-contrast: more) {\n      @include colour-css-vars-high-contrast-dark(\"form-error\");\n    }\n  }\n\n  @include colour-background(\"background\");\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accent-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accent-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"black\")} !important;\n  --button-background: #{colour.brand-colour(\"light-grey\")} !important;\n  --button-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"pink\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"orange\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"green\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"blue\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n\n%hide-on-print {\n  @media print {\n    display: none;\n  }\n}\n\n@mixin hide-on-print() {\n  @extend %hide-on-print;\n}\n","@use \"sass:math\";\n\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$padding-units-top: 10 !default;\n$padding-units-bottom: 2 !default;\n$padding-units-narrow: 3 !default;\n$shift-units: 5 !default;\n\n.tna-hero {\n  &__figure {\n    min-height: clamp(\n      #{spacing.space($padding-units-top + $padding-units-bottom)},\n      calc(40vw - #{spacing.space($padding-units-top + $padding-units-bottom)}),\n      50rem\n    );\n    margin: 0;\n    padding-top: spacing.space($padding-units-top);\n    padding-bottom: spacing.space($padding-units-bottom);\n\n    display: flex;\n    align-items: flex-end;\n\n    position: relative;\n  }\n\n  &__caption {\n    width: 100%;\n\n    overflow: visible;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 5;\n  }\n\n  &__details {\n    width: 100%;\n\n    overflow: visible;\n  }\n\n  &__details-summary {\n    width: 1.5rem;\n    height: 1.5rem;\n\n    position: absolute;\n    top: spacing.space(0.5);\n    right: spacing.space(0.5);\n    z-index: 2;\n\n    font-size: 0;\n    line-height: 1.5rem;\n    text-align: center;\n\n    list-style: none;\n\n    border-radius: 100%;\n\n    cursor: pointer;\n\n    @include colour.accent;\n\n    @include colour.colour-border(\"background\", 4px);\n\n    &:hover {\n      @include colour.colour-font(\"background\");\n\n      @include colour.colour-background(\"font-base\");\n    }\n  }\n\n  &__details-summary-icon {\n    font-size: 1.25rem;\n    font-weight: 700;\n    font-style: normal;\n    text-transform: lowercase;\n  }\n\n  &__information {\n    width: 45rem;\n    max-width: 75vw;\n    padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n      spacing.space(1);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n\n    @include colour.contrast;\n\n    @include typography.relative-font-size(16);\n  }\n\n  &__image {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    img {\n      width: 100%;\n      height: 100%;\n\n      object-fit: cover;\n    }\n  }\n\n  &__details[open] &__details-summary {\n    @include colour.contrast;\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      width: 1.5rem;\n      height: 0.125rem;\n\n      display: block;\n\n      position: absolute;\n      top: 50%;\n      left: 50%;\n\n      @include colour.colour-background(\"font-dark\");\n    }\n\n    &::before {\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    &::after {\n      transform: translate(-50%, -50%) rotate(-45deg);\n    }\n\n    &:hover {\n      &::before,\n      &::after {\n        height: 0.25rem;\n      }\n    }\n\n    &-icon {\n      font-size: 0;\n    }\n  }\n\n  &__inner {\n    position: relative;\n    z-index: 4;\n  }\n\n  &:not(.tna-background-accent, .tna-background-tint) &__inner {\n    @include colour.contrast-on-mobile;\n  }\n\n  &__content {\n  }\n\n  &__content-inner {\n    padding: spacing.space(2);\n\n    @include colour.colour-background(\"background\");\n  }\n\n  &__heading {\n  }\n\n  &__body {\n  }\n\n  &--split {\n  }\n\n  &--split:not(.tna-background-accent, .tna-background-tint) {\n    @include colour.contrast;\n  }\n\n  &--split &__figure {\n    min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem);\n    padding-top: spacing.space(2);\n    padding-bottom: spacing.space(2);\n\n    align-items: center;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__information {\n    max-width: 50%;\n\n    box-sizing: border-box;\n  }\n\n  &--split &__image {\n    left: 50%;\n  }\n\n  &--split &__content {\n    width: 50%;\n    padding-right: grid.gutter-width();\n  }\n\n  &--split &__content-inner {\n    padding: 0;\n  }\n\n  &--shift {\n    margin-bottom: spacing.space($shift-units - $padding-units-bottom);\n  }\n\n  &--shift &__content-inner {\n    position: relative;\n    top: spacing.space($shift-units);\n  }\n\n  &--shift:not(.tna-background-accent, .tna-background-tint) &__content-inner {\n    @include colour.contrast;\n  }\n\n  &--narrow {\n  }\n\n  &--narrow &__figure {\n    min-height: max(#{spacing.space($padding-units-narrow * 2)}, 20rem);\n    padding-top: spacing.space($padding-units-narrow);\n    padding-bottom: spacing.space($padding-units-narrow);\n  }\n\n  &--details-cutout &__details {\n    &::before {\n      content: \"\";\n      @include colour.plain;\n\n      width: 3rem;\n      height: 3rem;\n\n      position: absolute;\n      top: 0;\n      right: 0;\n      z-index: 1;\n\n      border-radius: 0% 0 0% 50%;\n      @include colour.colour-background(\"background\");\n    }\n\n    &[open] {\n      &::before {\n        display: none;\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    & &__figure {\n      min-height: auto;\n      padding: 0;\n\n      flex-direction: column;\n    }\n\n    &__caption {\n      order: 2;\n    }\n\n    &__details {\n    }\n\n    &__details-summary {\n    }\n\n    &__details-summary-icon {\n    }\n\n    &__information,\n    &--split &__information {\n      width: auto;\n      max-width: none;\n\n      left: 0;\n    }\n\n    &__image {\n      width: 100%;\n\n      position: static;\n\n      order: 1;\n\n      img {\n        height: auto;\n      }\n    }\n\n    &__inner {\n      order: 3;\n    }\n\n    &__content {\n    }\n\n    &__content-inner {\n      padding-right: 0;\n      padding-left: 0;\n    }\n\n    &__heading {\n    }\n\n    &__body {\n      margin-top: spacing.space(1);\n    }\n\n    &--shift {\n      margin-bottom: 0;\n    }\n\n    &--shift &__content-inner {\n      position: static;\n    }\n\n    &--split &__figure {\n      min-height: auto;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    &--split &__content {\n      width: 100%;\n      padding-right: grid.gutter-width-half();\n    }\n\n    &--split &__content-inner {\n      padding-top: spacing.space(2);\n      padding-bottom: spacing.space(2);\n    }\n  }\n\n  @include colour.on-high-contrast-and-forced-colours {\n    &__information,\n    &__content-inner {\n      @include colour.colour-border(\"keyline-dark\", 1px);\n    }\n\n    @include media.on-mobile {\n      &__inner {\n        @include colour.colour-border(\"keyline-dark\", 1px);\n        border-top: 0;\n      }\n\n      &__content-inner {\n        border: none;\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include relative-font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include relative-font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include relative-font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include relative-font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include relative-font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include relative-font-size($font-size-medium);\n      }\n    }\n  }\n}\n"]}

package/nationalarchives/components/hero/hero.scss

@@ -8,27 +8,10 @@
 
 $padding-units-top: 10 !default;
 $padding-units-bottom: 2 !default;
+$padding-units-narrow: 3 !default;
 $shift-units: 5 !default;
 
 .tna-hero {
-  &--contrast {
-    @include colour.contrast;
-  }
-
-  &--tint {
-    @include colour.tint;
-  }
-
-  &--accent {
-    @include colour.accent;
-
-    .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) {
-      @include colour.contrast;
-
-      @include colour.colour-border("contrast-background");
-    }
-  }
-
   &__figure {
     min-height: clamp(
       #{spacing.space($padding-units-top + $padding-units-bottom)},
@@ -172,7 +155,7 @@ $shift-units: 5 !default;
     z-index: 4;
   }
 
-  &:not(#{&}--accent):not(#{&}--tint) &__inner {
+  &:not(.tna-background-accent, .tna-background-tint) &__inner {
     @include colour.contrast-on-mobile;
   }
 
@@ -191,23 +174,10 @@ $shift-units: 5 !default;
   &__body {
   }
 
-  &--shift {
-    margin-bottom: spacing.space($shift-units - $padding-units-bottom);
-  }
-
-  &--shift &__content-inner {
-    position: relative;
-    top: spacing.space($shift-units);
-  }
-
-  &--shift:not(#{&}--accent):not(#{&}--tint) &__content-inner {
-    @include colour.contrast;
-  }
-
   &--split {
   }
 
-  &--split:not(#{&}--accent):not(#{&}--tint) {
+  &--split:not(.tna-background-accent, .tna-background-tint) {
     @include colour.contrast;
   }
 
@@ -240,8 +210,54 @@ $shift-units: 5 !default;
     padding: 0;
   }
 
+  &--shift {
+    margin-bottom: spacing.space($shift-units - $padding-units-bottom);
+  }
+
+  &--shift &__content-inner {
+    position: relative;
+    top: spacing.space($shift-units);
+  }
+
+  &--shift:not(.tna-background-accent, .tna-background-tint) &__content-inner {
+    @include colour.contrast;
+  }
+
+  &--narrow {
+  }
+
+  &--narrow &__figure {
+    min-height: max(#{spacing.space($padding-units-narrow * 2)}, 20rem);
+    padding-top: spacing.space($padding-units-narrow);
+    padding-bottom: spacing.space($padding-units-narrow);
+  }
+
+  &--details-cutout &__details {
+    &::before {
+      content: "";
+      @include colour.plain;
+
+      width: 3rem;
+      height: 3rem;
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1;
+
+      border-radius: 0% 0 0% 50%;
+      @include colour.colour-background("background");
+    }
+
+    &[open] {
+      &::before {
+        display: none;
+      }
+    }
+  }
+
   @include media.on-mobile {
-    &__figure {
+    & &__figure {
       min-height: auto;
       padding: 0;