Merge branch '3.0.x' into prod/3.0.x

source/_data/design-tokens.artifact.yml

@@ -212,7 +212,7 @@ gesso:
       background: "#0071BC"
       text: "#fff"
     table:
-      border: "#757575"
+      border: "#ccc"
       background: "#fff"
       background-head: "#eee"
       background-foot: "#eee"
@@ -250,20 +250,20 @@ gesso:
         stack: georgia, "droid serif", "Times New Roman", Times, serif
       secondary:
         name: Secondary
-        stack: BureauGrot, impact, "avenir next condensed heavy", "Droid Sans",
-          sans-serif;
+        stack: BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid
+          Sans", sans-serif;
       book:
         name: Book
-        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy",
+          "Droid Sans", sans-serif'
       condensed:
         name: Condensed
-        stack: BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans",
-          sans-serif
+        stack: BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed
+          heavy", "Droid Sans", sans-serif
       condensedbook:
         name: Condensed-Book
-        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        stack: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
       system:
         name: System  Typ1451-Regular
         stack: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -330,38 +330,38 @@ gesso:
         font-size: 41.056px
         font-weight: 400
       h1:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 41.056px
         font-weight: 400
         line-height: 1.1
       h2:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 28.832px
         font-weight: 400
         line-height: 1.1
       h3:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 22.784px
         font-weight: 400
         line-height: 1.1
       h4:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 20.256px
         font-weight: 400
         line-height: 1.1
       h5:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 18px
         font-weight: 400
         line-height: 1.1
       h6:
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
-          Sans", sans-serif'
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next
+          condensed heavy", "Droid Sans", sans-serif'
         font-size: 16px
         font-weight: 400
         line-height: 1.1

source/_meta/_00-head.mustache

@@ -4,7 +4,13 @@
     <title>{{ title }}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width" />
-
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap"
+          media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    </noscript>
     <link rel="stylesheet" href="../../../../css/style.css?{{ cacheBuster }}" media="all" />
     <link rel="stylesheet" href="../../../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
 

source/_meta/_00-head.twig

@@ -7,8 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>{{ page_title }} | {{ site_name }}</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    <link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet"  href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    </noscript>
     <link rel="stylesheet" href="../../../../css/styles.css?{{ cacheBuster }}" media="all">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css?{{ cacheBuster }}" media="all">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css?{{ cacheBuster }}" media="all">

source/_meta/_02-basic-head.twig

@@ -7,8 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>{{ page_title }} | {{ site_name }}</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" media="print" onload="this.media='all'" />
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
+    </noscript>
     <link rel="stylesheet" href="../../../css/styles.css?{{ cacheBuster }}" media="all">
     <script src="../../../js/libraries/modernizr.min.js?v=3.3.1"></script>
     <link rel="stylesheet" href="../../../css/pattern-lab.css?{{ cacheBuster }}" media="all">

source/_patterns/00-config/_design-tokens.artifact.scss

@@ -254,7 +254,7 @@ $gesso: (
       text: #fff,
     ),
     table: (
-      border: #757575,
+      border: #ccc,
       background: #fff,
       background-head: #eee,
       background-foot: #eee,
@@ -300,19 +300,19 @@ $gesso: (
       ),
       secondary: (
         name: Secondary,
-        stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;',
+        stack: 'BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid Sans", sans-serif;',
       ),
       book: (
         name: Book,
-        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
       ),
       condensed: (
         name: Condensed,
-        stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        stack: 'BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
       ),
       condensedbook: (
         name: Condensed-Book,
-        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        stack: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
       ),
       system: (
         name: 'System  Typ1451-Regular',
@@ -386,37 +386,37 @@ $gesso: (
         font-weight: 400,
       ),
       h1: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 41.056px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h2: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 28.832px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h3: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 22.784px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h4: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 20.256px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h5: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 18px,
         font-weight: 400,
         line-height: 1.1,
       ),
       h6: (
-        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
+        font-family: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
         font-size: 16px,
         font-weight: 400,
         line-height: 1.1,

source/_patterns/00-config/config.design-tokens.yml

@@ -212,7 +212,7 @@ gesso:
       background: brand.blue.base
       text: grayscale.white
     table:
-      border: grayscale.gray-5
+      border: grayscale.gray-3
       background: grayscale.white
       background-head: grayscale.gray-2
       background-foot: grayscale.gray-2
@@ -250,16 +250,16 @@ gesso:
         stack: 'georgia, "droid serif", "Times New Roman", Times, serif'
       secondary:
         name: Secondary
-        stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
+        stack: 'BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
       book:
         name: Book
-        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+        stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
       condensed:
         name: Condensed
-        stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+        stack: 'BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
       condensedbook:
         name: Condensed-Book
-        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
+        stack: '"BureauGrotCond Book",  "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
       system:
         name: System  Typ1451-Regular
         stack: 'Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'

source/_patterns/01-global/02-typography/typography.twig

+{# Due to barlow being a fallback font from google this allows the fonts to be displayed in pattern lab #}
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;500&display=swap');
+</style>
 {% for webfont in webfonts %}
   <div class="pattern-lab-font">
     <h3 class="pattern-lab-font__family" style="{{ webfont.style }}">{{ webfont.family_name }}</h3>

source/_patterns/01-global/02-typography/typography.yml

@@ -32,6 +32,28 @@ webfonts:
       font_name: 'georgia'
       font_weight: '700'
       font_style: 'normal'
+-
+  family_name: 'Barlow'
+  style: 'font-family: Barlow, sans-serif;'
+  font:
+    -
+      font_preview_character: 'Aa'
+      font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+      font_preview_style: 'font-family: Barlow; font-weight: 400; font-style: normal;'
+      font_name: 'Barlow'
+      font_weight: 'normal'
+      font_style: 'normal'
+-
+  family_name: 'Barlow Condensed'
+  style: 'font-family:"Barlow Condensed", sans-serif;'
+  font:
+    -
+      font_preview_character: 'Aa'
+      font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
+      font_preview_style: "font-family: 'Barlow Condensed'; font-weight: 500; font-style: normal;"
+      font_name: 'Barlow Condensed'
+      font_weight: 'medium'
+      font_style: 'normal'
 -
   family_name: 'BureauGrot'
   style: 'font-family: "BureauGrot", serif;'
@@ -204,7 +226,8 @@ webfonts:
     -
       font_preview_character: 'Aa'
       font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
-      font_preview_style: "font-family: fdsu-rwd; font-weight: 400; font-style: normal;"
+      font_preview_style: 'font-family: fdsu-rwd; font-weight: 400; font-style: normal;'
       font_name: 'fdsu-rwd'
       font_weight: 'normal'
       font_style: 'normal'
+      

source/_patterns/02-base/02-html-elements/20-unordered-list/_unordered-list.scss

@@ -2,7 +2,7 @@
 // Unordered list styles.
 
 ul {
-  list-style-type: disc;
+  list-style: disc;
   margin: 0 0 rem(gesso-spacing(sm));
   padding: 0 0 0 rem(gesso-spacing(md)); // LTR
 
@@ -12,8 +12,12 @@ ul {
     }
   }
 
-  ol,
   ul {
+    list-style-type: circle;
     margin: rem(gesso-spacing(sm) / 2) 0 0;
+    li > ul {
+      list-style-type: disc;
+
+    }
   }
 }

source/_patterns/02-base/02-html-elements/21-ordered-list/_ordered-list.scss

@@ -11,8 +11,11 @@ ol {
     }
   }
 
-  ol,
-  ul {
+  ol{
+    list-style-type: lower-alpha;
     margin: rem(gesso-spacing(sm) / 2) 0 0;
+    li > ol {
+      list-style-type: lower-roman;
+    }
   }
 }

source/_patterns/02-base/02-html-elements/24-table/_table.scss

@@ -2,26 +2,24 @@
 // Table styles.
 
 caption {
-  margin-bottom: rem(gesso-spacing(xxs));
+  font-size: gesso-base-font-size();
+  font-style:italic;
+  padding: gesso-spacing(xs);
 }
 
-// col {}
-
-// colgroup {}
-
 table {
   border-collapse: collapse;
   border-spacing: 0;
-  margin-bottom: rem(gesso-spacing(xs));
-  min-width: 100%;
-}
+  margin: rem(gesso-spacing(xs)) 0;
+  max-width: 100%;
+  width: 100%;
 
-// tbody {}
+}
 
 td {
   background-color: gesso-color(table, background);
   border: 1px solid gesso-color(table, border);
-  padding: rem(gesso-spacing(sm));
+  padding: gesso-spacing(xs);
 }
 
 tfoot {
@@ -32,10 +30,14 @@ tfoot {
 }
 
 th {
-  background-color: gesso-color(table, background);
+  background-color: gesso-color(table, background-head);
   border: 1px solid gesso-color(table, border);
-  padding: rem(gesso-spacing(sm));
+  font-style:italic;
+  padding: gesso-spacing(xs);
   text-align: left;
+  &[scope="row"] {
+    background-color: gesso-color(table, background-head);
+  }
 }
 
 thead {

source/_patterns/04-components/card/_card.scss

@@ -8,12 +8,17 @@ $card-meta-color: gesso-color(ui, generic, text-dark) !default;
 $card-padding: rem(gesso-spacing(sm)) !default;
 
 .card {
-
   width: 100%;
 
-  .views-row &{
-    height:100%;
+  .views-row & {
+    height: 100%;
+  }
+
+  .uw-label {
+    display: block;
+    margin-top: 1rem;
   }
+
   &__catalog-tags {
     padding-bottom: rem(gesso-spacing(sm));
   }
@@ -25,12 +30,13 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   box-shadow: gesso-box-shadow(1);
   padding: $card-padding;
   transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
+
   &:hover,
   &:focus-within {
     box-shadow: gesso-box-shadow(3);
   }
 }
-.card__image{}
+
 .card__featured-image {
   align-items: center;
   background-position: center center;
@@ -41,6 +47,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   justify-items: center;
   min-height: 44rem;
   position: relative;
+
   .card__header {
     align-self: end;
     margin-bottom: 0;
@@ -51,7 +58,6 @@ $card-padding: rem(gesso-spacing(sm)) !default;
       padding: 0;
     }
 
-
     .card__date {
       margin-bottom: 0;
       margin-top: 0;
@@ -81,16 +87,19 @@ $card-padding: rem(gesso-spacing(sm)) !default;
     }
   }
 }
+
 .card__header{
   @include uw-no-breakout();
   margin-bottom: rem(gesso-spacing(xs));
   width: 100%;
 
 }
+
 .card__date {
   font-size: rem(gesso-font-size(0));
   margin-bottom: rem(gesso-spacing(sm));
 }
+
 .card__title {
   margin:rem(gesso-spacing(xs)) 0;
   padding:0;
@@ -102,13 +111,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
     );
   }
 }
-.card__sub-title{}
+
 .card__author{
   @include uw-no-breakout();
   font-family: gesso-font-family(systemmedium);
   font-size: gesso-font-size(-1);
   margin-top: 0;
   padding: 0 0 gesso-spacing(xs) 0;
+
   a {
     @include link(
         $card-link-color,
@@ -116,10 +126,12 @@ $card-padding: rem(gesso-spacing(sm)) !default;
     );
   }
 }
+
 // body
 .card__body {
   width: 100%;
 }
+
 .card__content {
   margin-bottom: rem(gesso-spacing(md));
   width: 100%;
@@ -127,13 +139,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
     margin-bottom:0;
   }
 }
+
 .card__media {
   //background:$test-color-4;
   margin-bottom: rem(gesso-spacing(md));
   order:-1;
   width: 100%;
-  a {
 
+  a {
     display:inline-block;
     height: 100%;
     width: 100%;
@@ -146,6 +159,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
       }
     }
   }
+
   img {
     //-webkit-filter: grayscale(0);
     //filter: grayscale(0);
@@ -168,16 +182,17 @@ $card-padding: rem(gesso-spacing(sm)) !default;
 .card__footer {
   width: 100%;
 }
+
 .card__tags{
   margin:0;
   padding:0;
   width: 100%;
-
-
 }
+
 .card__readmore {
   text-align: right;
 }
+
 .card__social{
   max-width:20rem;
   width: 100%;
@@ -190,17 +205,12 @@ $card-padding: rem(gesso-spacing(sm)) !default;
   }
 
   .card__media {
-
     margin-bottom: 0;
   }
 
   @include breakpoint(gesso-breakpoint(md)) {
     flex-direction: row;
 
-    .card__title {
-
-    }
-
     .card__body {
       max-width: 600px;
       padding: $card-padding 2vw 0;

source/_patterns/04-components/card/card--node/_card--node.scss

@@ -74,4 +74,11 @@
       }
     }
   }
+  &--opportunity{
+    .uw-node__without-image &{
+      .card__header{
+        margin-bottom:gesso-spacing(md);
+      }
+    }
+  }
 }

source/_patterns/04-components/card/card--node/card--node.twig

@@ -12,7 +12,7 @@
     'type': type,
     'show_hover': '',
     'header': node.header,
-    'hero_image': node.hero_image,
+    'media': node.media,
     'image': node.image,
     'content': node.content,
     'footer': node.footer,

source/_patterns/04-components/card/card-elements/_date.twig

 <div class="card__date">
-  {% include '@components/date/date.twig' with {
-    'date_format': date_format,
-    'date': date,
-  } %}
+
+  {% for d in date %}
+    {% if date|length > 1 and loop.index0 == 0 %}
+      <details class="uw-date-details">
+        <summary role="button" aria-controls="edit-future-dates-collapsible" aria-expanded="false" aria-pressed="false" class="uw-date-details__summary">
+    {% endif %}
+    {% if modifier_classes != 'node--opportunity' %}
+      <span class="uw-date">
+    {% endif %}
+      {% if d.all_day %}
+        {% include '@components/date/_date.twig' with {
+          'date_format': 'long',
+          'date': d.date,
+        } %} (all day)
+      {% elseif d.date_range %}
+        {% include '@components/date/_date.twig' with {
+          'date_format': 'long_with_time',
+          'date': d.start_date,
+        } %}
+        -
+        {% if d.same_day %}
+          {% include '@components/date/_date.twig' with {
+            'date_format': 'time_only',
+            'date': d.end_date,
+          } %}
+        {% else %}