[data-palette="App"] {
--Active-Primary:#FF9532;
--Active-Secondary:rgba(84,84,84,0.8);
--Alert:rgba(200,0,0,1);
--Available:rgba(0,160,65,1);
--Avatar-Border-Size:0px;
--Avatar-Radius:50%;
--Avatar-Shadow:0px 5px 20px rgba(0,0,0,0.25);
--Background-Primary:rgba(0,0,0,1);
--Background-Secondary:rgba(0,0,0,0.9);
--Badge-Background:rgba(200,0,0,1);
--Badge-Box-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Badge-Overlay:rgba(255,255,255,1);
--Badge-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Body:var(--px16) "App Typeface 3";
--Button:var(--px15) "App Typeface 3";
--Button-Case:none;
--Button-Highlight-Radius:7px;
--Button-Line-Thickness:1px;
--Button-Radius:7px;
--Byline:var(--px13) "App Typeface 3";
--Byline-Case:none;
--Caption:var(--px13) "App Typeface 3";
--Caption-Case:none;
--Card-Padding-Top:15px;
--Card-Radius:3px;
--Card-Vertical-Offset:0px;
--Central-Divider:1px solid rgb(238,238,238);
--Cover-Background:rgba(0,0,0,1);
--Cover-Overlay:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
--Dialog-Shade:rgba(0,0,0,0.3);
--Divider-Narrow:0px solid rgba(240,240,240,1);
--Divider-Regular:0px solid rgba(255,255,255,0.5);
--Divider-Wide:0px solid rgba(0,134,85,1);
--Focus-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Focus-Highlight:rgba(255,255,255,0.5);
--Focus-Radius:5px;
--Focus-Shade:rgba(255,255,255,0.3);
--Footnote:var(--px12) "App Typeface 3";
--Footnote-Case:none;
--Header-Primary:rgba(255,255,255,1);
--Header-Secondary:rgba(255,255,255,0.8);
--Heading:var(--px24) "App Typeface 2";
--Heading-Case:none;
--Hint-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Hovered-Filter:contrast(70%) brightness(110%);
--Icon-Scale:1;
--Image-Border-Size:0px;
--Image-Radius:3px;
--Image-Shadow:none;
--Line-Spacing:170%;
--Link-Decoration:underline!important;
--Link-Weight:bold;
--Logo-Scale:1.4;
--Nominal:0.3s;
--On-Alert:rgba(255,255,255,1);
--Overlay-Filter:blur(3px);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Radius:15px;
--Overlay-Secondary:rgba(255,255,255,0.8);
--Pressed-Filter:contrast(50%) brightness(120%);
--Quick:0.2s;
--Quote-Radius:3px;
--Selected:rgba(0,0,0,0.2);
--Shadow:0px 5px 20px rgba(0,0,0,0.2);
--Shadow-Primary:rgba(0,0,0,0.5);
--Shadow-Secondary:rgba(0,0,0,0.1);
--Slow:0.5s;
--Smallprint:var(--px10) "App Typeface 3";
--Smallprint-Case:none;
--Spacing-Narrow:5px;
--Spacing-Regular:10px;
--Spacing-Wide:15px;
--Sub-Subheading:var(--px16) "App Typeface 1";
--Sub-Subheading-Case:normal;
--Subeading-Case:uppercase;
--Subheading:var(--px17) "App Typeface 1";
--Subtitle:var(--px18) "App Typeface 3";
--Subtitle-Case:normal;
--Surface-Primary:rgb(240, 240, 240);
--Surface-Secondary:rgba(151,151,151,1);
--Title:bold var(--px26) "App Typeface 2";
--Title-Case:none;
--Unavailable:rgba(150,150,150,1);
--Very-Quick:0.1s;
--Very-Slow:0.8s;

}
[data-palette="App Logo"] {
--Active:rgba(255,255,255,1);
--Background-Primary:rgba(0,0,0,1);
--Background-Secondary:rgba(0,0,0,1);
--Highlight:rgba(255,255,255,0.1);
--Overlay:rgba(255,255,255,1);
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="App Menu"] {
--Active:rgba(255,255,255,1);
--Active-Primary:rgba(255,255,255,0);
--Active-Secondary:orange;
--Background-Primary:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);;
--Background-Secondary:rgba(36,170,13,1);
--Button-Line-Thickness:2px;
--Highlight:rgba(255,255,255,1);
--Overlay:rgba(255,255,255,1);
--Overlay-Primary:rgba(0,0,0,1);
--Overlay-Secondary:rgba(66,66,66,1);
--Surface-Primary:rgba(255,255,255,0);
--Surface-Secondary:rgba(255,255,255,0);

}
[data-palette="App Header"] {
--Active-Primary:rgba(255,255,255,1);
--Active-Secondary:#FF9532;
--Background-Primary:rgba(84,84,84,1);
--Background-Secondary:rgba(255,255,255,0.9);
--Header-Primary:rgba(255,255,255,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(160,59,147,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(170,170,170,0.9);
--Title:var(--px18) "App Typeface 2";
--Title-Case:none;

}
[data-palette="App Footer"] {
--Active-Primary:transparent;
--Active-Secondary:rgba(0,134,85,1);
--Background-Primary:#bb423e;
--Background-Secondary:transparent;
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="Overlay"] {
--Active-Primary:orange;
--Active-Secondary:#333333;
--Background-Primary:#111111;
--Background-Secondary:#222222;
--Surface-Primary:#FFFFFF;

}
[data-palette="Overlay Header"] {
--Background-Primary:#333333;
--Title:var(--px18) "App Typeface 2";
--Title-Case:none;

}
[data-palette="Editor"] {
--Active-Primary:rgba(253,153,0,1);
--Active-Secondary:rgba(246,246,246,1);
--Avatar-Border-Size:0px;
--Avatar-Radius:50%;
--Avatar-Shadow:0px 5px 20px rgba(0,0,0,0.25);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(240,240,240,1);
--Badge-Background:rgba(200,0,0,1);
--Badge-Box-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Badge-Overlay:rgba(255,255,255,1);
--Badge-Shadow:0px 2px 5px rgba(0,0,0,0.3);
--Body:var(--px16) "Editor Typeface 3";
--Button:var(--px13) "Editor Typeface 3";
--Button-Case:none;
--Button-Highlight-Radius:7px;
--Button-Line-Thickness:4px;
--Button-Radius:100px;
--Byline:var(--px13) "Editor Typeface 3";
--Byline-Case:none;
--Caption:var(--px13) "Editor Typeface 3";
--Caption-Case:none;
--Card-Padding-Top:15px;
--Card-Radius:0px;
--Card-Vertical-Offset:0px;
--Central-Divider:1px solid rgb(238,238,238);
--Cover-Background:rgba(0,0,0,1);
--Cover-Overlay:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
--Dialog-Shade:rgba(0,0,0,0.3);
--Divider-Narrow:1px solid rgba(240,240,240,1);
--Divider-Regular:1px solid rgba(151,151,151,1);
--Divider-Wide:1px solid rgba(0,134,85,1);
--Focus-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Focus-Highlight:rgba(255,255,255,0.5);
--Focus-Radius:5px;
--Focus-Shade:rgba(255,255,255,0.3);
--Footnote:var(--px12) "Editor Typeface 3";
--Footnote-Case:none;
--Header-Primary:rgba(22,22,22,1);
--Header-Secondary:rgba(176,176,176,1);
--Heading:var(--px22) "Editor Typeface 1";
--Heading-Case:uppercase;
--Hint-Box-Shadow:0px 0px 0px 1px rgba(0,100,255,0.5), 0px 0px 0px 3px rgba(0,100,255,0.2);
--Hovered-Filter:contrast(70%) brightness(110%);
--Icon-Scale:1;
--Image-Border-Size:0px;
--Image-Radius:3px;
--Image-Shadow:0px 0px 0px 1px rgba(0,0,0,0.1);
--Line-Spacing:170%;
--Link-Decoration:none;
--Link-Weight:bold;
--Logo-Scale:1;
--Nominal:0.3s;
--Overlay-Filter:blur(3px);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Radius:15px;
--Overlay-Secondary:rgba(255,255,255,0.8);
--Pressed-Filter:contrast(50%) brightness(120%);
--Quick:0.2s;
--Quote-Radius:3px;
--Shadow:0px 5px 20px rgba(0,0,0,0.2);
--Shadow-Primary:rgba(0,0,0,0.5);
--Shadow-Secondary:rgba(0,0,0,0.1);
--Slow:0.5s;
--Smallprint:var(--px10) "Editor Typeface 3";
--Smallprint-Case:none;
--Spacing-Narrow:5px;
--Spacing-Regular:10px;
--Spacing-Wide:15px;
--Sub-Subheading:var(--px12) "Editor Typeface 2";
--Sub-Subheading-Case:normal;
--Subeading-Case:uppercase;
--Subheading:var(--px18) "Editor Typeface 1";
--Subtitle:var(--px17) "Editor Typeface 2";
--Subtitle-Case:normal;
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(176,176,176,1);
--Title:var(--px20) "Editor Typeface 3";
--Title-Case:normal;
--Very-Quick:0.1s;
--Very-Slow:0.8s;

}
[data-palette="Editor Logo"] {
--Background-Primary:rgba(37,38,40,1);
--Background-Secondary:transparent;
--Surface-Primary:rgba(255,255,255,1);
--Surface-Secondary:rgba(255,255,255,0.9);

}
[data-palette="Editor Menu"] {
--Active-Primary:rgba(253,153,0,1);
--Active-Secondary:rgba(246,246,246,1);
--Background-Primary:transparent;
--Background-Secondary:rgba(248,248,248,1);
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(136,136,136,1);

}
[data-palette="Editor Banner"] {
--Active-Primary:rgba(88,88,88,1);
--Active-Secondary:rgba(236,236,236,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(200,70,0,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Header"] {
--Active-Primary:rgba(40,160,220,1);
--Active-Secondary:rgba(246,246,246,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(22,22,22,1);
--Header-Secondary:rgba(176,176,176,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(22,22,22,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Footer"] {
--Active-Primary:rgba(0,134,85,1);
--Active-Secondary:rgba(0,134,85,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(248,248,248,1);
--Header-Primary:rgba(0,134,85,1);
--Header-Secondary:rgba(37,38,40,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(110,110,110,1);

}
[data-palette="Editor Popover"] {
--Active-Primary:rgba(0,134,85,1);
--Active-Secondary:rgba(120,120,120,1);
--Background-Primary:rgba(255,255,255,1);
--Background-Secondary:rgba(240,240,240,1);
--Header-Primary:rgba(30,30,30,1);
--Header-Secondary:rgba(110,110,110,1);
--Overlay-Primary:rgba(255,255,255,1);
--Overlay-Secondary:rgba(255,255,255,0.8);
--Surface-Primary:rgba(30,30,30,1);
--Surface-Secondary:rgba(248,248,248,1);

}
[data-palette="Editor Popover Banner"] {
--Background-Primary:rgba(246,246,246,1);

}


@font-face {font-family:"App Typeface 1"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/krlyn5jc-znj06l/assets/kvff9aaw-sotiub/original") format("truetype");}
@font-face {font-family:"App Typeface 2"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/krlyn5jc-znj06l/assets/kvydt2gm-aoa7xi/original") format("truetype");}
@font-face {font-family:"App Typeface 3"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/krlyn5jc-znj06l/assets/kvff9an1-2txurr/original") format("truetype");}
@font-face {font-family:"Editor Typeface 1"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/krlyn5jc-znj06l/assets/kvff9aaw-sotiub/original") format("truetype");}
@font-face {font-family:"Editor Typeface 2"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/krlyn5jc-znj06l/assets/kvff9aya-x6adeu/original") format("truetype");}
@font-face {font-family:"Editor Typeface 3"; font-display:block; src:url("https://prod-eu-tapjet-apps.s3.eu-west-2.amazonaws.com/krlyn5jc-znj06l/assets/kvff9an1-2txurr/original") format("truetype");}


.Tab-D2 > .Card {display:grid; grid-template-columns:[card-start body-start] 1fr [body-end card-end]; grid-template-rows:[card-start body-start] max-content [body-end] var(--Spacing-Wide) [card-end];}
.Tab-D2 > .Card:before {grid-area:card; position:relative; top:var(--Card-Vertical-Offset); display:block; content:""; z-index:-1; border-radius:var(--Card-Radius); background:var(--Background-Primary);}
.Tab-D2 > .Card > [data-field="Body"] {grid-area:body; display:block; font:var(--Body); color:var(--Surface-Primary);}
/*
@Name: Article Listing 5
@Summary: Large feature image with title overlay.
*/
.Article-L5 {--Overlay-Background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); --Picture-Aspect-Ratio: 4/1; --Picture-Radius: 0px; --Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: 0px;}
.Article-L5 {display: grid; grid-template-columns: [focus-start overlay-start picture-start] var(--Page-Gutter) [title-start subtitle-start] 1fr [subtitle-end title-end] var(--Page-Gutter) [picture-end overlay-end focus-end]; grid-template-rows: [focus-start picture-start] 6fr [overlay-start] var(--Spacing-Wide) [title-start] max-content [title-end subtitle-start] min-content [subtitle-end] minmax(var(--Spacing-Regular), 1fr) [picture-end overlay-end focus-end]; grid-gap: 0;}
.Article-L5:after {grid-area: overlay; z-index: 1;  content: ""; background: var(--Overlay-Background);}
.Article-L5 > [data-field="Title"] {grid-area: title; z-index: 2; display: flex; font: var(--Title); text-transform: var(--Title-Case); color: var(--Overlay-Primary);}
.Article-L5 > [data-field="Subtitle"] {grid-area: subtitle; z-index: 2; display: flex; font: var(--Subtitle); text-transform: var(--Subtitle-Case); color: var(--Overlay-Secondary);}
.Article-L5 > [data-field="Picture"] {grid-area: picture; z-index: 0; display: block; box-shadow: none; border-radius: 0px;}

/* XL */
.XL.Article-L5 {--Picture-Aspect-Ratio: 5/1; font-size: 1.3rem;}

/* LG */
.LG.Article-L5 {--Picture-Aspect-Ratio: 4/1; font-size: 1.1rem;}

/* MD */
/* SM */
.SM.Article-L5 {--Picture-Aspect-Ratio: 3/1; font-size: 0.9rem;}

/* XS */
.XS.Article-L5 {--Picture-Aspect-Ratio: 2/1; font-size: 0.8rem;}
/*
@Name: Article Listing 6
@Summary: High and large feature image with title overlay.
*/
.Article-L6 {--Picture-Aspect-Ratio: 2/1; --Picture-Radius: 0px; --Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: 0px;}
.Article-L6 {display: grid; grid-template-columns: [focus-start overlay-start picture-start] var(--Page-Gutter) 1fr [title-start subtitle-start shadow-start] 3fr [shadow-end subtitle-end title-end] 4fr var(--Page-Gutter) [picture-end overlay-end focus-end]; grid-template-rows: [focus-start picture-start] 1fr [overlay-start] var(--Spacing-Wide) [title-start shadow-start] max-content [title-end] var(--Spacing-Regular) [subtitle-start] min-content [shadow-end subtitle-end] minmax(var(--Spacing-Regular), 1fr) [picture-end overlay-end focus-end]; grid-gap: 0;}
.Article-L6 > [data-field="Title"] {grid-area: title; z-index: 2; display: flex; font: var(--Title); xtext-transform: var(--Title-Case); color: var(--Overlay-Primary); text-shadow:0px 3px 10px var(--Background-Primary);}
.Article-L6 > [data-field="Subtitle"] {grid-area: subtitle; z-index: 2; display: flex; font: var(--Subtitle); text-transform: var(--Subtitle-Case); color: var(--Overlay-Primary); text-shadow:0px 3px 10px var(--Background-Primary);}
.Article-L6 > [data-field="Picture"] {grid-area: picture; z-index: 0; display: block; box-shadow: none; border-radius: 0px;}
.Article-L6:after {grid-area:shadow; content:""; background:radial-gradient(ellipse farthest-side, var(--Background-Primary), transparent 100%); z-index:1; margin:calc( var(--Spacing-Wide) * -3 ); opacity:0.7}

/* XL ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige */
.XL.Article-L6 {--Picture-Aspect-Ratio: 3/1; font-size: 1.3rem;}

/* LG */
.LG.Article-L6 {--Picture-Aspect-Ratio: 2/1; font-size: 1.1rem;}

/* SM */
.SM.Article-L6 {--Picture-Aspect-Ratio: 2/1; font-size: 0.9rem;}

/* XS */
.XS.Article-L6 {--Picture-Aspect-Ratio: 2/1; font-size: 0.8rem;}
/*
@Name: Article Expanded 5
@Summary: Large feature image with title overlay and external links.
*/
.Article-E5 {--Overlay-Background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); --Picture-Aspect-Ratio: 4/1; --Picture-Radius: 0px; --Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: 0px;}
.Article-E5 {display: grid; grid-template-columns: [focus-start overlay-start picture-start] var(--Page-Gutter) [title-start subtitle-start] 1fr [subtitle-end title-end] var(--Page-Gutter) [picture-end overlay-end focus-end]; grid-template-rows: [focus-start picture-start] 6fr [overlay-start] var(--Spacing-Wide) [title-start] max-content [title-end subtitle-start] min-content [subtitle-end] minmax(var(--Spacing-Regular), 1fr) [picture-end overlay-end focus-end]; grid-gap: 0;}
.Article-E5:after {grid-area: overlay; z-index: 1;  content: ""; background: var(--Overlay-Background);}
.Article-E5 > [data-field="Title"] {grid-area: title; z-index: 2; display: flex; font: var(--Title); text-transform: var(--Title-Case); color: var(--Overlay-Primary);}
.Article-E5 > [data-field="Subtitle"] {grid-area: subtitle; z-index: 2; display: flex; font: var(--Subtitle); text-transform: var(--Subtitle-Case); color: var(--Overlay-Secondary);}
.Article-E5 > [data-field="Picture"] {grid-area: picture; z-index: 0; display: block; box-shadow: none; border-radius: 0px;}

/* XL */
.XL.Article-E5 {--Picture-Aspect-Ratio: 5/1; font-size: 1.3rem;}

/* LG */
.LG.Article-E5 {--Picture-Aspect-Ratio: 4/1; font-size: 1.1rem;}

/* MD */
/* SM */
.SM.Article-E5 {--Picture-Aspect-Ratio: 3/1; font-size: 0.9rem;}

/* XS */
.XS.Article-E5 {--Picture-Aspect-Ratio: 2/1; font-size: 0.8rem;}
/*
@Name: Article Listing 2
@Summary: Image abvove title and subtitle.
*/
.Article-L2 {--Picture-Aspect-Ratio:16/9; --Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid;  grid-template-columns:[focus-start picture-start title-start subtitle-start] 1fr [subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] 1fr [subtitle-end focus-end]; grid-gap: var(--Spacing-Narrow) 0px; align-items: flex-start;}
.Article-L2 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); justify-self:start; text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Article-L2 > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-L2 > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block; margin-bottom:var(--Spacing-Narrow);}


/* XL */
.XL.Article-L2 {--Picture-Aspect-Ratio:4/3; grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide);}

/* LG */
.XL.Article-L2 {--Picture-Aspect-Ratio:4/3; grid-gap: var(--Spacing-Narrow) 0px;}


/* SM */
.SM.Article-L2 {grid-gap:var(--Spacing-Narrow) 0; grid-template-columns:[focus-start picture-start title-start] 1fr [title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] 1fr [title-end focus-end];}
.SM.Article-L2 > [data-field="Title"] {font:bold var(--Byline);}
.SM.Article-L2 > [data-field="Subtitle"] {display: none;}

/* XS */
.XS.Article-L2 {grid-gap:var(--Spacing-Narrow) 0; grid-template-columns:[focus-start picture-start title-start] 1fr [title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] 1fr [title-end focus-end];}
.XS.Article-L2 > [data-field="Title"] {font:bold var(--Caption);}
.XS.Article-L2 > [data-field="Subtitle"] {display: none;}
/*
@Name: Article Listing 1
@Summary: Image on left, title, subtitle and summary on right.
*/
.Article-L1 {--Focus-Radius: 5px; --Focus-Highlight-Width: 1px; --Focus-Shade-Width: 5px; --Focus-Margin: -4px; display:grid; grid-template-columns: [focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 3fr [summary-end subtitle-end title-end focus-end]; grid-template-rows: [focus-start picture-start title-start] auto [title-end subtitle-start] auto [subtitle-end summary-start] 1fr [summary-end picture-end focus-end]; border-bottom: var(--Divider-Narrow); grid-gap: var(--Spacing-Narrow) var(--Spacing-Wide); border-bottom: var(--Divider-Narrow); align-items: flex-start;}
.Article-L1 > [data-field="Title"] {grid-area: title; display:block; font: var(--Subheading); text-transform: var(--Subheading-Case); color: var(--Surface-Primary);}
.Article-L1 > [data-field="Subtitle"] {grid-area: subtitle; display:block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-L1 > [data-field="Picture"] {grid-area: picture; align-self: flex-start; display:block;}
.Article-L1 > [data-field="Summary"] {grid-area: summary; display:block; font: var(--Body); color: var(--Surface-Primary);}
.Article-L1 > [data-field="Summary"] p:last-child {padding-bottom: 0;}


/* XL */
.XL.Article-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 5fr [summary-end subtitle-end title-end focus-end];}

/* LG */
.XL.Article-L1 {grid-template-columns:[focus-start picture-start] 1fr [picture-end title-start subtitle-start summary-start] 4fr [summary-end subtitle-end title-end focus-end];}

/* MD */
.MD.Article-L1 {grid-gap: var(--Spacing-Narrow) var(--Spacing-Regular);}
.MD.Article-L1 > [data-field="Summary"] {font: var(--Body);}

/* SM */
.SM.Article-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.SM.Article-L1 > [data-field="Title"] {font: var(--Sub-Subheading);}
.SM.Article-L1 > [data-field="Summary"] {display: none;}

/* XS */
.XS.Article-L1 {--Picture-Aspect-Ratio:16/9; grid-template-columns:[focus-start picture-start title-start subtitle-start summary-start] 1fr [summary-end subtitle-end title-end focus-end picture-end]; grid-template-rows:[focus-start picture-start] auto [picture-end title-start] auto [title-end subtitle-start] auto [subtitle-end focus-end];}
.XS.Article-L1 > [data-field="Title"] {font: var(--Sub-Subheading); text-transform: var(--Sub-Subheading-Case);}
.XS.Article-L1 > [data-field="Subtitle"] {display: none;}
.XS.Article-L1 > [data-field="Summary"] {display: none;}
/*
@Name: Article Detail 1
@Summary: Cover picture at top with Title and Subtitle overlayed on the cover. Rest of content below in a card.
*/
.Article-D1 > .Card {display:grid; grid-template-columns:[title-start subtitle-start card-start actions-start content-start related-start] 5fr [subtitle-end title-end] 2fr [content-end actions-end card-end related-end]; grid-template-rows: [title-start] calc( var(--Cover-Height) - var(--Header-Height) - var(--Header-Height) - var(--Card-Radius) ) [title-end subtitle-start] var(--Header-Height) [subtitle-end card-start] var(--Card-Padding-Top) [actions-start] auto [actions-end content-start] max-content [content-end meta-start] auto [meta-end related-start] auto [related-end] var(--Spacing-Wide) [card-end];}
.Article-D1 > .Card:before {grid-area:card; position:relative; top:var(--Card-Vertical-Offset); display:block; content:""; z-index:-1; border-radius:var(--Card-Radius) var(--Card-Radius) 0 0; background:var(--Background-Primary);}
.Article-D1 > .Card > [data-field="Title"] {grid-area:title; align-self: end; justify-self: start; display:block; padding:var(--Spacing-Wide) var(--Page-Gutter); font:var(--Title); text-transform:var(--Title-Case); color:var(--Overlay-Primary); text-shadow: 0px 3px 10px var(--Background-Primary);}
.Article-D1 > .Card > [data-field="Subtitle"] {grid-area:subtitle; align-self: start; justify-self: start; display:block; padding:0 var(--Page-Gutter) 0 var(--Page-Gutter); font:var(--Subtitle); text-transform:var(--Subtitle-Case); color:var(--Overlay-Primary); text-shadow: 0px 3px 10px var(--Background-Primary);}
.Article-D1 > .Card > [data-field="Body"] {grid-area:body; display:block; font:var(--Body); color:var(--Surface-Primary);}


/* Actions */
.Article-D1 > .Card > [data-collection="Actions"] {grid-area: actions;}

/* Meta */
.Article-D1 > .Card > [data-field="Meta"] {grid-area: meta; padding: 0 var(--Page-Gutter);}
.Article-D1  > .Card >[data-field="Meta"] [data-field="Duration"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary);}
.Article-D1 > .Card > [data-field="Meta"] [data-field="Updated"] {display: inline-block; font: var(--Byline); text-transform: var(--Byline-Case); color: var(--Surface-Secondary); padding-right: var(--Spacing-Regular);}

/* Content */
.Article-D1  > .Card > [data-field="Content"] {grid-area: content; display: block; font: var(--Body); color: var(--Surface-Primary); border-bottom: var(--Divider-Narrow); margin: 0 var(--Page-Gutter); text-shadow: 0px 3px 10px var(--Background-Primary);}
.Article-D1  > .Card > [data-field="Related"] {grid-area: related; display: block;}

/* XS */
.XS.Article-D1 > .Card > [data-field="Title"] {font-size:1rem;}
.XS.Article-D1 > .Card > [data-field="Subtitle"] {font-size:0.9rem;}
.XS.Article-D1 > .Card > [data-field="Content"] {font-size:0.8rem;}

/* SM */
.SM.Article-D1 > .Card > [data-field="Title"] {font-size:1.3rem;}
.SM.Article-D1 > .Card > [data-field="Subtitle"] {font-size:1.1rem;}
.SM.Article-D1 > .Card > [data-field="Content"] {font-size:0.9rem;}

/* LG */
.LG.Article-D1 > .Card > [data-field="Title"] {font-size:1.6rem;}

/* XL */
.XL.Article-D1 > .Card > [data-field="Title"] {font-size:2rem;}