/* BANNER GROUP (hh-banner-group.css)
------------------------------------------------------ */
.BannerGroup {
	display: grid;
	grid-gap: var(--gap);
	box-sizing: border-box;
	margin-top: 0;
	scroll-margin-top: 100px;
}
section > .BannerGroup {
	margin-bottom: 0;
}
.BannerGroupSection > h1:not(:empty) {
	margin-bottom: var(--gap);
}
.BannerGroup > a,
.BannerGroup > div {
	text-decoration: none;
	display: grid;
	grid-auto-flow: column;
	border: 1px solid #eee;
	/* box-shadow: 0 1rem 1.5rem -1rem #0002; */
	border: none;
	/* box-shadow: 0 0 0 1px #0002 inset; */
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
	
}
.BannerGroup > * > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	background-color: var(--background-color, var(--white));
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
}
.BannerGroup > * > figure img,
.BannerGroup > .hotBuy * > figure img {
	flex-grow: 1;
	width: 100%;
	object-fit: var(--object-fit, cover);
}
.BannerGroup > * > aside {
	position: relative;
	padding: calc(var(--gap) * 1.5) calc(var(--gap) * 2);
}
.BannerGroup > * > aside .UpTo,
.BannerGroup > * > aside .OrMore {
	color: var(--color, inherit) !important;
}
.BannerGroup > * > aside .OrMore > strong {
	color: var(--saveStory-color, inherit) !important;
}
.BannerGroup .Button {
	background-color: transparent;
	border-color: var(--button-color);
	color: var(--button-color);
}
.BannerGroup > a,
.BannerGroup > div {
	grid-auto-flow: row;
	grid-template-columns: 1fr 1fr;
	min-height: min(calc(20vw), calc(var(--width) * .15));
	background-color: var(--background-color);
	color: var(--color);
}

.BannerGroup > * p,
.BannerGroup > * .p {
	font-size: calc(var(--fontsize) * 1.5);
	padding: calc(var(--gap) / 3) 0 0 0;
}
.BannerGroup > * h4,
.BannerGroup > * .h4 {
	padding-bottom: calc(var(--gap) / 2);
}

.BannerGroup[data-children="1"] .Button {
	position: initial;
	width: fit-content;
}

.BannerGroup .ThemeFlip-Give-Play-More > aside h2 {
	color: rgba(0, 190, 188, 1);
}

.BannerGroupSection > p:empty,
.BannerGroup > .hotBuy strong:empty,
.BannerGroup > .hotBuy p:empty,
.BannerGroup > * h4:empty{
	display: none;
} 

@media (max-width: 1024px) and (min-width: 801px) {
	.BannerGroup[data-children="2"] {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 798px) {
	.BannerGroup > a,
	.BannerGroup > div {
		grid-template-columns: 1fr 1.5fr;
	}
	.BannerGroup > * p {
		line-height: 120%
	}
}

.BannerGroup > .HotBuy {
	/* background-color: var(--hh-white);
	color: #000000; */
	background-color: var(--background-color);
	color: var(--color);
}
.BannerGroup > .HotBuy aside {
	border-top: 6px solid var(--lineColor);
}

.BannerGroup .Button::after {
	background: var(--button-color);
}

.BannerGroup > .hotBuy.eachBannerPro{
	background-color: var(--hh-pro);
}
.BannerGroup > .hotBuy.eachBannerYellow{
	background-color: var(--hh-yellow);
}
.BannerGroup > .hotBuy.eachBannerGrey{
	background-color: var(--hh-grey);
}
.BannerGroup > .hotBuy.eachBannerYellow
.BannerGroup > .hotBuy.eachBannerPro,
.BannerGroup > .hotBuy.eachBannerRed{
	color: var(--hh-white);
}
.BannerGroup > .hotBuy.ThemeRed .Button,
.BannerGroup > .hotBuy.ThemeYellow .Button,
.BannerGroup > .hotBuy.ThemePro .Button,
.BannerGroup > .hotBuy.ThemeGrey .Button{
	border-color: var(--hh-red);
	color: var(--hh-red);
	background: transparent;

}
.BannerGroup >.hotBuy.ThemeRed .Button::after,
.BannerGroup >.hotBuy.ThemeYellow .Button::after,
.BannerGroup >.hotBuy.ThemePro .Button::after,
.BannerGroup >.hotBuy.ThemeGrey .Button::after,
.BannerGroup > .ThemeWhite .Button::after{
	background: var(--hh-red);
}


.BannerGroup > .hotBuy.eachBannerYellow .Button,
.BannerGroup > .hotBuy.eachBannerPro .Button,
.BannerGroup > .hotBuy.eachBannerRed .Button{
	color: var(--hh-white);
	border-color: var(--hh-white);
}

.BannerGroup > .hotBuy.eachBannerYellow .Button::after,
.BannerGroup > .hotBuy.eachBannerPro .Button::after,
.BannerGroup > .hotBuy.eachBannerRed .Button::after{
	background: var(--hh-white);
}
.BannerGroup > .hotBuy > aside img{
	width: auto;
	height: calc(var(--gap) * 2.5);
}
.BannerGroup > .hotBuy h2{
	padding-top: 0.5em;
}
.BannerGroup> .hotBuy strong{
	font-size: 2.375em;
	color: var(--hh-red) ;
	display: inline-block;
} */
.BannerGroup[data-children="1"]> .hotBuy strong {
	padding-bottom: .64em;
}
.BannerGroup[data-children="2"]> .hotBuy strong ,
.BannerGroup[data-children="3"]> .hotBuy strong {
	padding-bottom: 0.63em;;
}

.BannerGroup> .hotBuy > aside div {
	padding-bottom: 2.18em;
}
.BannerGroup> .hotBuy > aside div code {
	font-size: 1.38em;
	color: #000000;
}
.BannerGroup[data-children="1"] > * {
	min-height: 20rem;
}
.BannerGroup > * aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: calc(var(--gap) * .5);
}
.BannerGroup > * aside > *:not(.Button) {
	margin: 0;
	padding: 0;
}
.BannerGroup:not([data-children="1"]) > * aside > p:nth-child(3) {
	margin-top: auto;
}
.BannerGroup[data-children="1"] > * aside {
	justify-content: center;
}
.BannerGroup > * aside[data-has-disclaimer="true"] > small:last-child,
.BannerGroup > * aside[data-has-disclaimer="true"] > *:first-child {
	margin-top: auto;
}

@media (min-width: 800px) {
	.BannerGroup[data-children="3"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.BannerGroup[data-children="3"] > a,
	.BannerGroup[data-children="3"] > div {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
	}
	.BannerGroup[data-children="3"] > * figure {
		height: calc(100vw * .2);
		height: min(calc(100vw * .15), calc(var(--width) * .15));
	}

	.BannerGroup[data-children="2"] {
		grid-template-columns: 1fr 1fr;
	}

	.BannerGroup[data-children="3"] > a,
	.BannerGroup[data-children="3"] > div {						/*Hot buy Theme */
		grid-template-rows: minmax(min-content, max-content); 
	}
	
}

@media (max-width: 600px) {
	.BannerGroup {
		grid-gap: calc(var(--gap) * 2);
	}
	.BannerGroup > a,
	.BannerGroup > div {
		display: grid;
		grid-template-rows: minmax(min-content, max-content);
		grid-template-columns: 1fr;
	}

	.BannerGroup > * > figure{
		min-height: min(calc(55vw), calc(var(--width) * .15));
	}

	.BannerGroup[data-children="1"] > * > aside,
	.BannerGroup[data-children="2"] > * > aside,
	.BannerGroup[data-children="3"] > * > aside{
		grid-row: 2/2;
	}
	.BannerGroup .Button {
		/* width: 100%; */
		position: initial;
	}
	.BannerGroup[data-children="1"] > .hotBuy aside{
		padding: calc(var(--gap) *3) var(--gap);
	}
}

.BannerGroup small.SaveStory {
	font-size: 2rem;
	color: var(--saveStory-color);
}

.BannerGroup:not([data-children="3"] ) .ImageAlignRight figure {
	order: 2 !important;
}

.BannerGroup img.BannerGroupLogo {
	height: 7rem;
	width: auto;
	max-width: min(70%, 250px);
	object-fit: contain;
	object-position: bottom;
}




/* GRID+SHELF (hh-grid+shelf.css)
------------------------------------------------------ */
.Grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-column), 1fr);
	grid-gap: var(--gap);
	row-gap: calc(var(--gap) * 2);
	margin: var(--gap) 0 0 0;
	}
.Products.Grid {
		row-gap: var(--gap);
	}

@media (max-width: 700px) {
	.Grid:not(.Shelf) {
		display: grid;
		grid-gap: var(--gap);
		margin: var(--gap) 0;
		}
}
.Grid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin-bottom: 0.75rem;
}

.Grid .ProductCard {
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
}

.Grid.Shelf {
	/* grid-template-columns: repeat(var(--children, 16), calc((100% / var(--grid-column)) - var(--gap))); */
	grid-auto-flow: column;
	grid-auto-columns: calc((100% / var(--grid-column)) - var(--gap));
	grid-template-columns: initial;

	overflow-x: auto;
	overflow-y: hidden;
	-ms-scroll-snap-type: x mandatory;	
	scroll-snap-type: x mandatory;
	padding-bottom: var(--gap);	
}

.Grid.Shelf > * {
	scroll-snap-align: start;
}
.Grid.Shelf::-webkit-scrollbar {
	-webkit-appearance: none;
	appearance: none;	
	height: .35rem;
}
.Grid.Shelf::-webkit-scrollbar-track {
	background:#f2f2f2;
}
.Grid.Shelf::-webkit-scrollbar-thumb {
	background-color: var(--hh-red);
	outline:none;
}
@supports (scrollbar-color: var(--hh-red) var(--hh-red)) {
	.Grid.Shelf {
		scrollbar-color: var(--hh-red) #e4e4e4;
		scrollbar-width: thin;
	}
}

/* not sure if we need this next bit.... */
@media (max-width: 600px) {
	.Grid:not(.Shelf) {
		/* grid-gap: calc(var(--gap) * 3) !important; */
		grid-template-columns: 1fr;
	}
	.Grid.Sitemap {
		grid-template-columns: repeat(2, 1fr);
    }
	/* .Grid:not(.Shelf) > section {
		display: grid;
		grid-template-columns: 35% 1fr;
		grid-gap: calc(var(--gap) * .5) calc(var(--gap) * 1.5);
		padding: 0;
		box-shadow: none;
		border: none;
		border-radius: 0;
		margin: 0;
	}
	.Grid:not(.Shelf) > section > a:first-child {
		grid-row: 1/3;
	}
	.Grid:not(.Shelf) > section fieldset {
		grid-column: 2/3;
		order: 9;
	}
	.Grid > section a img {
		padding: 0;
	} */
}

.ShelfController {
	display: flex;
	align-items: center;
	column-gap: calc(var(--gap) / 2);
	font-variant-numeric: tabular-nums; 
}
.ShelfController button:first-child {	
	background: url("/_icons/icon_LeftArrow.black.svg") no-repeat 50% 50%;	
}
.ShelfController button {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	outline: none;
	margin: 0;
	padding: 0;	
	font: inherit;
	cursor: pointer;
	text-indent: -9999em;		
	width: 1rem;
	height: 1rem;
	background: url("/_icons/icon_rightarrow.black.svg") no-repeat 50% 50%;
	background-size: 100%;
	overflow: hidden;
}
.ShelfController button:disabled {
	opacity: 0.3;
}

.ShelfController b {
	font: inherit;
	display: inline-block;
	min-width: 4ch;
	text-align: center;
}




/* DOTW (hh-dotw.css)
------------------------------------------------------ */
.DOTW-Title {
	/* background-color: var(--hh-red); */
    background: linear-gradient(to bottom, var(--dotw-primary-color-1) 30%, var(--dotw-primary-color-2) 30%);
	color: var(--dotw-text-color,#fff);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none !important;
	padding-bottom: var(--gap);
}
.DOTW-Title .Button {
	border-color: var(--dotw-text-color,#fff);
	color: var(--dotw-text-color,#fff);
	background: transparent;
}
.DOTW-Title .Button:after {
    background: var(--dotw-text-color, #fff);
}
.DOTW-Title figure {
    margin-top: 1.5rem;
    width: 90%;
    height: auto;
}
.DOTW-Title img {
	width: 100%;
	height: auto;
	/* background: var(--hh-red);
	background: linear-gradient(0deg, var(--hh-red) 0%, var(--hh-red) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); */
	/* padding-block: var(--gap); */
	object-fit: contain;
	/* margin-bottom: 0; */
	aspect-ratio: 5/4;
}

.DOTW-Title h3 {
	font-size: 18px;
	line-height: 120%;
	font-family: "hhAgendaMedium", sans-serif;
	font-weight: 700;
	padding: 0 calc(var(--gap) / 2);
}
.DOTW-Title p {
	font-size: 14px;
	padding: calc(var(--gap) / 2);
}

/* .DOTW-container > h3 {
	margin-top: -36px;
	margin-left: 350px;
} */

.DOTW-container{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.5em;
}

.DOTW-container .Grid.Shelf {
	grid-column: 1/3;
	grid-row: 2/2;
}

.DOTW-container a {
	text-decoration: none;
}

.DOTW-Product {
	font-size: 1.5em;
	line-height: 120%;	
	text-align: center;
	font-weight: 700;
	background-color: #F5F5F5;
}
.DOTW-Product h3 {	
	font-family: "hhAgendaMedium", sans-serif;
	font-size: 1.25rem;	
}
.DOTW-Product aside {
	/* background-color: #F5F5F5; */
	padding: 15px 10px;
	/* height: 105px; */
}
.DOTW-SaveStory {	
	color: var(--hh-red);		
	font-family: "hhAgendaBold", sans-serif;
}
.DOTW-Product h3:hover {	
	text-decoration: underline;			
}
.DOTW-SaveStory .enUptoTxt,
.DOTW-SaveStory .frUptoTxt {	
	display: inline-flex;
	flex-direction: column;
	line-height: 0.8;
	font-size: 0.45em;	
	letter-spacing: 0.5px;
	align-items: center;
	justify-content: center;
	vertical-align: middle;	
}
.DOTW-SaveStory .frUptoTxt {
	font-size: inherit;
}

@media (max-width: 600px) {
	.DOTW-Product .DOTW-SaveStory,
	.DOTW-Product h3 {
		font-size: 0.8em;
	}

	/* .DOTW-container > h3 {		
		margin-left: 275px;
		margin-top: -31px;
	} */

	.DOTW-container {
		display: block;
	}
	.DOTW-SaveStory .enUptoTxt,
	.DOTW-SaveStory .frUptoTxt {
		flex-direction: row;
		font-size: inherit;
	}
	.DOTW-Product aside {		
		padding: 10px;
		/* height: 85px; */
	}
	.DOTW-SaveStory .enUptoTxt span:first-child:after,
	.DOTW-SaveStory .frUptoTxt span:first-child:after {
		content: '';
		padding-right: 0.278em;
	}
 }




 /* FEATURED CATEGORIES (hh-featuredcategories.css)
------------------------------------------------------ */
.FeaturedCategories.Grid {
	--grid-column: 2;
	grid-template-columns: repeat(var(--grid-column), 1fr);
	/* background:#f5f5f5; */
	/* padding: 20px 20px; */
	padding: 0;
	scroll-margin-top: 300px;

}

@media (min-width: 449px) {
	.FeaturedCategories.Grid {
		--grid-column: 3;
	}
}


@media (max-width: 649px) {
	.FeaturedCategories.Grid {
		column-gap: var(--gap) !important;
		row-gap: var(--gap) !important;
	}
}

@media (min-width: 649px) {
	.FeaturedCategories.Grid {
		--grid-column: 4;
	}
}


@media (min-width: 1049px) {
	.FeaturedCategories.Grid {
		--grid-column: 6;
	}
}

.FeaturedCategories.TextOnly figure {
	display: none;
}

.FeaturedCategories.TextOnly a {
	background-color: #EBEBEB;
	padding: calc(var(--gap) * 0.5);
	border-radius: 0.7em;
	display: flex;
	justify-content: center;
	align-items: center;
}
.FeaturedCategories.TextOnly > a h3 {
	font-size: 1.125rem;
}
.Grid.FeaturedCategories.TextOnly {
	grid-template-columns: repeat(6, 1fr);
	grid-gap: var(--gap);
}
.SubCategories .h4 {
	font-family: 'hhAgendaBold';
	padding: 0;
}

.FeaturedCategories > * {
	text-align: center;
	text-decoration: none;
}

.FeaturedCategories > * h3 {
	display: inline-block;
	font-size: 1.25rem;
	padding: calc(var(--gap) / 2) 0;
	font-family: "hhAgendaMedium", sans-serif;
}
.FeaturedCategories > a:hover h3 {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
.Tint-title {
	padding-bottom: 0px;
}
.Tint-title p {
	font-size: 1.5rem;
}
.Tint-title p:empty {
	display: none;
}

.FeaturedCategories > * > figure {
	display: block;
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	padding: 10%;
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
	box-sizing: border-box;
	line-height: 0;
	background: #fff;
}
.SubCategories figure {
	margin-bottom: calc(var(--gap) / 2) !important;
	box-shadow: none !important;
}
.FeaturedCategories > * > figure img {
	width: 100%;
	height: auto;
	object-fit: scale-down;
	aspect-ratio: 1 / 1;
}
@media (max-width: 1200px) {
	/* .SubCategories {
		grid-template-columns: repeat(4, 1fr) !important;
	} */
	.SubCategories.TextOnly {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}
@media (max-width: 999px) {
	.SubCategories.TextOnly {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}
@media (max-width: 600px) {
	/* .SubCategories {
		grid-template-columns: repeat(2, 1fr) !important;
	} */
	.SubCategories.TextOnly {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}




 /* AD BLOCK (hh-ad-block.css)
------------------------------------------------------ */
.adBlockSection > a{
	display: grid;
	grid-template-columns: .7fr 2fr;
	min-height: min(calc(20vw), calc(var(--width) * .1));
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
	background-color: var(--background-color);
	cursor: var(--cursor-style);
}
.adBlockSection > a > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	/* background: var(--hh-grey); */
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
}
.adBlockSection > a > figure > img {
	flex-grow: 1;
	width: 100%;
	object-fit: var(--object-fit, cover);
}
.adBlockSection > a > aside {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: calc(var(--gap) * 1.5);
	row-gap: calc(var(--gap) * .5);
	padding: calc(var(--gap) * 0.5) calc(var(--gap) * 2);
	color: var(--color);
}
.adBlockSection > a > aside > img {
	max-width: 16em;
	width: auto;
	height: calc(var(--gap) * 5.5);
	object-fit: contain;
}
.adBlockSection > a > aside > div:first-child {
	grid-column: 1/3;
}

.adBlockSection > a > aside div:last-child {
	text-align: center;
}
.adBlockSection > a:hover {
	text-decoration: none;
}
/* .adBlockSection > a >aside div:nth-child(2) p {
	font-size: 1.5em;
	margin: 0;
	padding: 0;
} */
.adBlockSection > a > aside div mark {
	cursor: var(--cursor-style);
}

.adBlockSection > a .SaveStory{
	padding-bottom: .5em;
	font-size: 2rem;
	color: var(--saveStory-color);
}
.adBlockSection .Button {
	background-color: transparent;
	border-color: var(--button-color);
	color: var(--button-color);
	cursor: pointer;
}
.adBlockSection .Button::after {
	background: var(--button-color, #fff) !important;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.adBlockSection > a > aside {
		column-gap: calc(var(--gap) * 1);
		row-gap: calc(var(--gap) * 1);
	}
	.adBlockSection > a > aside > img {
		height: calc(var(--gap) * 4);
	}
}
@media (max-width: 1024px) {
	.adBlockSection > a > aside {
		grid-template-columns: 1fr;
		padding: calc(var(--gap) * 1) calc(var(--gap) * 1);
	}
	.adBlockSection > a > aside div:last-child {
		text-align: left;
	}
}
@media (max-width: 600px) {
	.adBlockSection > a {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	.adBlockSection > a > figure > img {
		width: 100%;
		/* object-fit: cover; */
		aspect-ratio: 16/9;
		height: auto;
	}
	.adBlockSection > a > aside {
		padding: calc(var(--gap) * 1.5);
		align-items: flex-start;
		grid-template-columns: 1fr;
	}
	.adBlockSection > a .SaveStory {
		padding-top: 0.5em;
	}
	.adBlockSection > a >aside div:last-child {
		align-self: center;
	}
}




 /* OFFER GROUP (hh-offer-group.css)
------------------------------------------------------ */
.OfferGroup {
	display: grid;
	grid-template-columns: repeat(var(--data-children), 1fr);
	/* grid-template-rows: clamp(15rem, 25vw, 28rem); */
	/* grid-template-rows: clamp(28rem, 28vw, 28rem); */
	grid-template-rows: 22rem;
	gap: calc(var(--gap) / 2);
	scroll-margin-top: 100px;
}
.OfferGroup-container .Light{
	padding-bottom: 0em;
}
.OfferGroup > * {
	display: grid;
	grid-template-rows: 1fr auto;
}
.OfferGroup > a:hover {
	text-decoration: none; 
}
.OfferGroup > * > * {
	grid-column: 1/2;
	/* grid-row: 1/2; */
}
.OfferGroup > * > img {
	width: 100%;
	height: auto;
	object-fit: cover;
	align-self: stretch;
	/* aspect-ratio: 1/1; */
	overflow: hidden;
	grid-row: 1/2;
}
.OfferGroup > * > aside {
	background-color: var(--offer-group-background);
	align-self: end;
	color: var(--offer-text-color);
	padding: 0.625rem;
	min-height: 3.5rem;
	grid-row: 2/3;
}
.OfferGroup > * > aside > h3 small.SaveStory {
	color: var(--offer-group-text-accent);
	font-size: 1.5rem;
	line-height: 100%;
	display: inline;
}
.OfferGroup > * > aside p {
	line-height: 100%;
	padding: 0;
	margin: 0;
}
.OfferGroup .SaveStory .UpTo {
	color: var(--offer-text-color) !important;
}
.OfferGroup > * > aside small {
	display: block;
	text-align: right;
	transform: translate(0, 8px);
	line-height: 100%
}

@media (min-width: 600px) and (max-width: 1100px){
	.OfferGroup {
		grid-template-rows: 30vw;
	}
}

@media(max-width: 600px) {
	.OfferGroup {
		grid-template-columns: 1fr;
	}
	/* .OfferGroup[data-children] > * >img {
		aspect-ratio: 1/0.8;
	} */
	.OfferGroup[data-children="2"] {
		grid-template-rows: repeat(2, 55vw);
	}
	.OfferGroup[data-children="3"] {
		grid-template-rows: repeat(3, 55vw);
	}
	.OfferGroup[data-children="4"] {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
}




 /* PRO HOT BUY (hh-pro-hot-buy.css)
------------------------------------------------------ */
.pro-hot-buy-section {
	scroll-margin-top: 100px;
}
.pro-hot-buy-section > a{
	display: grid;
	cursor: var(--cursor-style);
	grid-template-columns: 1fr 1fr;
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
}
.pro-hot-buy-section > a:hover{
	text-decoration: none;
}
.pro-hot-buy-section > a > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	background: var(--hh-white);
	display: flex;
	gap: 3.75em;
	justify-content: center;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
}

.pro-hot-buy-section > a > figure >img{
	flex-grow: 1;
	width: 100%;
	object-fit: var(--object-fit);
}
.pro-hot-buy-section > a > aside{
	display: flex;
    flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	/* text-align: center; */
	gap: calc(var(--gap) * .5);
	padding: calc(var(--gap) * 1.5);
}

.pro-hot-buy-section > a > aside > h2 {
    font-size: 6.25rem;
    font-family: "hhAgendaBlack", sans-serif;
    color: var(--hh-hotbuy-yellow);
    line-height: 0.8;
}

/* .pro-hot-buy-section > a .SaveStory{
    color: white;
} */

.pro-hot-buy-section > a > aside .h2{
	font-family: "hhAgendaMedium", sans-serif;
    font-size: 3.75rem;
}
.pro-hot-buy-section > a > aside .h2 span{
    font-size: inherit;
}

.pro-hot-buy-section > a > aside mark {
    /* margin-top: var(--gap); */
    margin-bottom: var(--gap);
    cursor: var(--cursor-style);
}
.pro-hot-buy-section > a > aside p{
    margin: 0;
    padding: 0;
}
.pro-hot-buy-section > a > aside > p:nth-of-type(1){
    font-size: 2.18rem;
    line-height: 1;
}
.pro-hot-buy-section > a > aside > p:nth-of-type(2){
    font-size: 1.25rem;
}


.pro-hot-buy-section > a > aside > p:nth-of-type(3) {
    font-size: 1rem;
}
.pro-hot-buy-section > a > aside div img{
	object-fit: cover;
	width: 6em ;
}
.pro-hot-buy-section > a > aside > div:nth-child(1) img{
    width: calc(var(--gap) * 13);
    height: calc(var(--gap) * 10);
    object-fit: cover;

}
.pro-hot-buy-section > a > aside div:nth-child(2){
	text-align: center;
	flex-basis: 19.75em;
}

@media (min-width: 600px) and (max-width: 1300px) {
	.pro-hot-buy-section > a > aside{
		/* flex-direction: column; */
        gap: calc(var(--gap) * .25);

	}
    .pro-hot-buy-section > a > aside > h2 {
        font-size: 4.9rem;
    }
    .pro-hot-buy-section > a > aside > p:nth-of-type(1){
        font-size: 1.9rem;
    }
}
@media (max-width: 600px) {
	.pro-hot-buy-section > a{
        grid-template-rows: 2fr 1fr;
        grid-template-columns: 1fr;
	}
    .pro-hot-buy-section > a > aside{
        /* flex-direction: column; */
        text-align: center;
        align-items: center;
	}
    .pro-hot-buy-section > a > aside > h2 {
        font-size: 5rem;
    }
    .pro-hot-buy-section > a > aside p:nth-child(6) {
        margin: 0.5rem 0;
    }
}




 /* SALE LINK BANNER (hh-sale-link-banner.css)
------------------------------------------------------ */
.sale-link-banner{
	scroll-margin-top: 100px;
}

.sale-link-banner > aside{
	display: flex;
	align-items: center;
	text-align: center;
	padding: calc(var(--gap)*.5) calc(var(--gap)*1);
	background-color: var(--background-color);
	color: var(--color);
}

.sale-link-banner .h4{
	color: inherit;
	display:inline;
}

.sale-link-banner > aside > div{
	flex-grow: 1;
}
.sale-link-banner > aside > div h4{
	display: contents;
}
.sale-link-banner > aside img{
	vertical-align: -17%;
	padding-right: .2em;
}
.sale-link-banner > aside :nth-child(3){
	border: solid var(--hh-white);
	border-width: 0 0.22em 0.22em 0;
	display: inline-block;
	padding: 0.22em;
	margin: 0.25em;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.sale-link-banner > aside.ThemeGrey :nth-child(3),
.sale-link-banner > aside.ThemeYellow :nth-child(3){
	border: solid var(--hh-black);
	border-width: 0 0.22em 0.22em 0;
	-webkit-transform: rotate(-45deg);
	}

/* Hover effect for links */
.sale-link-banner .link-hover{
	display: inline-block;
	position: relative;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
.sale-link-banner .link-hover:hover:after {
	transform: scaleX(1);
	transform-origin: bottom left;
}
.sale-link-banner .link-hover:after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--hh-white);
	transform-origin: left;
	transition: transform .3s ease-out;
}

.sale-link-banner .ThemeGrey .link-hover:after,
.sale-link-banner .ThemeYellow .link-hover:after {
	background-color: var(--hh-black);
}
@media (max-width: 600px) {
	.sale-link-banner > aside .link-hover,
	.sale-link-banner > aside :nth-child(3){
		display: none;
	}
	.sale-link-banner > aside{
		padding: calc(var(--gap)*1) calc(var(--gap)*.5);
	}
}




 /* THEME PAGE BANNER (hh-theme-page-banner.css)
------------------------------------------------------ */
.themePageBanner {
	display: grid;
	grid-gap: var(--gap);
	box-sizing: border-box;
	scroll-margin-top: 100px;
	
}
.themePageBanner > a {
	text-decoration: none;
	display: grid;
	grid-auto-flow: column;
	border: 1px solid #eee;
	border: none;
	grid-auto-flow: row;
	grid-template-columns: 1.5fr 1fr;
	min-height: min(calc(20vw), calc(var(--width) * .15));
	grid-gap: 1em;
	cursor: var(--cursor-style);
	/* box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee; */
}
.themePageBanner > a > aside {
	position: relative;
	padding: calc(var(--gap) * 4) calc(var(--gap) * 2);
	background-color: var(--background-color);
	color: var(--color);
}
.themePageBanner .Button{
	background-color: transparent;
	border-color: var(--button-color);
	color: var(--button-color);
}
.themePageBanner .Button::after{
	background: var(--button-color);
}
.themePageBanner > a > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	background: var(--hh-grey);
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
}
.themePageBanner > a > figure img {
	flex-grow: 1;
	width: 100%;
	object-fit: cover;
}
.themePageBanner > a p {
	font-size: 2rem;
	padding: 0.3em 0 0 0;
	line-height: 32px;
}

.themePageBanner .ImageAlignRight figure{
	order: 2;
}
.themePageBanner .TextAlignCenter {
	text-align: center;
}
.themePageBanner .TextAlignLeft{
	text-align: left;
}
.themePageBanner .ImageAlignRight {
	grid-template-columns: 0.5fr 1fr;
}
.themePageBanner .ThemeWhite {
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
}
@media (min-width:600px) and (max-width:999px){
	.themePageBanner > a {
		grid-gap: 0
	}
}
@media (max-width: 600px){
	.themePageBanner > a {
		display: grid;
		grid-template-rows: minmax(min-content, max-content);
		grid-template-columns: 1fr;
		grid-gap: 0;
		min-height: fit-content;
	}
	.themePageBanner > a > figure {
		/* min-height: min(calc(55vw), calc(var(--width) * .15)); */
		display: none;
	}
	.themePageBanner > a > aside {
		padding: calc(var(--gap) * 1.5) calc(var(--gap) * 2);
	}
	.themePageBanner .ImageAlignRight {
		grid-template-columns: 1fr;
	}
	.themePageBanner .ImageAlignRight figure{
		order: initial;
	}
	.themePageBanner > a p {
		font-size: 26px;
	}
}




 /* TEXT OVER IMAGE (hh-text-over-image.css)
------------------------------------------------------ */
.TextOverImage > *:first-child {
	display: grid;
	grid-template-columns: 0.75fr 1fr;
	grid-template-rows: 30rem;
	text-decoration: none;
	cursor: var(--cursor-style);
}
.TextOverImage > *:hover {
	text-decoration: none;
}
.TextOverImage > * > img {
	grid-column: 1/span 2;
	grid-row: 1/2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* aspect-ratio: 2/0.497; */
}
.TextOverImage > * > aside {
	grid-column: 1/2;
	grid-row: 1/2;
	z-index: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
	margin: var(--gap) 0 var(--gap) var(--gap);
	padding: calc(var(--gap) * 2);
}
.TextOverImage > * > aside::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	background: var(--textOverImage-background-color);
	opacity: 0.8;
}
.TextOverImage > * > aside .h1,
.TextOverImage > .contentGroup-TOI > aside .h2 {
	color: var(--textOverImage-text-color);
}
.TextOverImage > * > aside p {
	color: var(--textOverImage-text-color);
	/* flex-grow: 1; */
	font-size: 2rem;
	line-height: 130%;
}
.TextOverImage > * > aside mark {
	align-self: flex-start;
	cursor: var(--cursor-style);
}
.TextOverImage > * > aside .ButtonSecondary::after {
	background: var(--hh-black);
}
.TextOverImage > * > aside .ButtonSecondary {
	background: transparent;
	border-color: var(--hh-black);
	color: var(--hh-black);
}
.TextOverImage div {
	padding: calc(var(--gap) / 2) var(--gap);
	grid-column: 1/-1;
}
.TextOverImage div p {
	padding: calc(var(--gap) / 4) 0;
}
.TextOverImage div > p + p {
	padding: 0 !important;
}
.TextOverImage[data-assets="1"] div {
	grid-column: 1/3;
	padding: calc(var(--gap) / 2) calc(var(--gap) * 2);
	margin: 0 var(--gap);
}
.TextOverImage .contentGroup-TOI {
	grid-template-columns: 1fr 0.25fr ;
}
.TextOverImage .contentGroup-TOI figure {
	grid-column: 1/span 2;
	grid-row: 1/2;
}
.TextOverImage .contentGroup-TOI figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
[data-children="5"] .TextOverImage .contentGroup-TOI {
	grid-template-columns: 1fr;
}
.TextOverImage >.contentGroup-TOI > aside {
	margin: auto 1em 1.875rem 0rem;
	padding: calc(var(--gap) * 1);
}
[data-children="5"] .TextOverImage >.contentGroup-TOI > aside {
	margin: auto 1.5em 1.875rem 0rem;
}
.TextOverImage > .contentGroup-TOI > aside p {
	font-size: 1.5em;
	padding: 0;
}
.ContentGroup .TextOverImage {
	margin: 0;
}
.ContentGroup.Portrait[data-children="4"] .TextOverImage .contentGroup-TOI figure,
.ContentGroup.Portrait[data-children="5"] .TextOverImage .contentGroup-TOI figure {
	position: relative;
	padding-bottom: 133%;
}
.ContentGroup.Portrait[data-children="4"] .TextOverImage .contentGroup-TOI figure img,
.ContentGroup.Portrait[data-children="5"] .TextOverImage .contentGroup-TOI figure img {
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ContentGroup.Portrait[data-children="4"] .TextOverImage > *:first-child,
.ContentGroup.Portrait[data-children="5"] .TextOverImage > *:first-child {
	grid-template-rows: auto;
}

@media (max-width: 850px) {
	.TextOverImage > * {
		grid-template-columns: 1fr;
		grid-template-rows: 27rem auto;
	}
	.TextOverImage .contentGroup-TOI figure{
		grid-column: 1/1;
	}
	.TextOverImage > *:first-child {
		grid-template-columns: 1fr;
	}
	.TextOverImage > * > figure {
		grid-column: 1/2;
		grid-row: 1/2;
	}
	.TextOverImage > * > aside{
		grid-column: 1/2;
		grid-row: 2/3;
		margin: 0;
		padding: 1rem 2rem 1rem;
	}
	.TextOverImage > * > aside::after {
		background: var(--hh-black);
		opacity: 0.8;
	}
	.TextOverImage > * > aside .h1, 
	.TextOverImage > .contentGroup-TOI > aside .h2,
	.TextOverImage > * > aside p {
		color: var(--hh-white);
	}
	[data-children="5"] .TextOverImage >.contentGroup-TOI > aside {
		margin: 0 0 auto 0;
	}
	.TextOverImage > * > aside .ButtonSecondary {
		border-color: var(--hh-white);
		color: var(--hh-white);
	}
	.TextOverImage[data-assets="1"] div {
		margin: 0;
	}
	.TextOverImage .contentGroup-TOI{
		grid-template-columns: auto;
		grid-template-rows: minmax(min-content, max-content);
		/* height: 100%; */
	}
	.TextOverImage >.contentGroup-TOI > aside{
		margin: 0;
		padding: calc(var(--gap) * 1);
		justify-content: flex-start;
		align-self: flex-start;
	}
	.TextOverImage > .contentGroup-TOI > figure{
		height: min(calc(55vw), calc(var(--width) * .11));
	}
}

 
 
 
 /* BLOG CONTENT GROUP (hh-blog-content-group.css)
------------------------------------------------------ */
.blogContentGroup {
	display: grid;
	grid-gap: var(--gap);
	box-sizing: border-box;
	/* margin-top: var(--gap); */
	scroll-margin-top: 200px;
	/* grid-template-columns: 1fr 1fr; */
}

.blogContentGroup video{
	width: 100%;
	height: 100%;
}
.blogContentGroup > div {
	text-decoration: none;
	display: grid;
	grid-auto-flow: column;
	border: 1px solid #eee;
	border: none;
	/* grid-template-columns: 1fr 1fr; */
}
.blogContentGroup p{
	padding: 0;
}
.blogContentGroup p + p {
	padding-top: calc(var(--gap) / 2);
}
.blogContentGroup > div > aside {
	position: relative;
	padding: calc(var(--gap) * 1.5) calc(var(--gap) * 1.5);
	display: flex;
	flex-direction: column;
}
.blogContentGroup > div > aside > p {
	margin-top: auto;
	align-self: center;
	text-decoration: none;
	/* display: flex;
	justify-content: center;
	align-items: center;
	max-width: 300px; */
}
.blogContentGroup > div > aside > p > a:hover{
	text-decoration: none;
}
.blogContentGroup > div > aside > div {
	margin-bottom: 20px;
}
.blogContentGroup[data-children="1"] > div > aside > p {
	align-self: flex-start;
}
.blogContentGroup > div > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	/* background: var(--hh-grey); */
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
}
.blogContentGroup[data-children="2"] .imagePositionabove > figure {
	height: min(calc(100vw * .35),calc(var(--width) * .35));

}
.blogContentGroup > div > figure img {
	flex-grow: 1;
	width: 100%;
	object-fit: var(--object-fit);
}
.blogContentGroup > div > figure:has(img[src=""]){
	display: none;
}
.blogContentGroup[data-children="3"] > div > figure img,
.blogContentGroup[data-children="4"] > div > figure img,
.blogContentGroup[data-children="2"] .imagePositionabove > figure img {
	/* min-height: min(calc(55vw), calc(var(--width) * .20)); */
	height:100%;
} 
.blogContentGroup[data-children="2"] .imagePositionbelow {
	grid-template-rows: auto 36em;
	grid-template-columns: 1fr !important;
	grid-auto-flow:unset
}

.blogContentGroup[data-children="2"] .imagePositionbelow > aside{
	padding: calc(var(--gap) * 1.5) 0;
}

.blogContentGroup[data-children="2"] .imagePositionbelow > figure {
	height: min(calc(100vw * .35),calc(var(--width) * .35));

}
.blogContentGroup .imagePositionright figure{
	order: 1;
}
.blogContentGroup:not([data-children-secondary]) .imagePositionbelow figure{
	order: 2;
}
.contentgroup-richText hr {
	margin: var(--gap) 0 calc(var(--gap) * 2);
}
.blogContentGroup[data-children="2"] .imagePositionabove {
	grid-template-rows: minmax(min-content, max-content);
	grid-template-columns: 1fr !important;
	grid-auto-flow:unset
}
.blogContentGroup[data-children="2"] .imagePositionabove > aside{
	padding: calc(var(--gap) * 1.5) 0;
}
.blogContentGroup[data-children="2"] .imagePositionabove.backgroundGrey > aside {
	padding: calc(var(--gap)* 1.5);
}

.blogContentGroup .backgroundGrey {
	background-color: #ECECEC;
}
.blogContentGroup .backgroundWhite {
	background-color: var(--hh-white);;
}
.blogContentGroup[data-children="1"] > div,
.blogContentGroup[data-children="2"] > div{
	grid-template-columns: 1fr 1fr;
}
.blogContentGroup[data-children="2"] {
	grid-template-columns: 1fr 1fr;
}
.blogContentGroup[data-children="3"] {
	grid-template-columns: 1fr 1fr 1fr;
}
.blogContentGroup[data-children="3"] > div{
	grid-auto-flow: row;
	grid-template-rows: minmax(min-content, max-content); 
}
.blogContentGroup[data-children="4"] {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.blogContentGroup[data-children="4"] > div{
	grid-auto-flow: row;
	grid-template-rows: minmax(min-content, max-content); 
}

.blogContentGroup[data-children="3"] > div > figure,
.blogContentGroup[data-children="4"] > div > figure {
	background: #fff;
	position: relative;
	width: 100%;
}
.blogContentGroup[data-children="3"] > div > figure:after,
.blogContentGroup[data-children="4"] > div > figure:after {
	content: "";
	display: block;
	padding-bottom: 65%;
}
.blogContentGroup[data-children="3"] > div > figure > img,
.blogContentGroup[data-children="4"] > div > figure > img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: var(--object-fit);
	box-sizing: border-box;
	padding: 0;
}

.blogContentGroup[data-children-secondary] > div {
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
	grid-template-columns: 1fr 3fr;	
}
.blogContentGroup[data-children-secondary] > div.imagePositionright {
	grid-template-columns: 3fr 1fr;
}
.blogContentGroup[data-children-secondary] > div > figure {
    background-color: unset;
}
.blogContentGroup[data-children-secondary] > div.imagePositionright > figure {
	order: 2 ;
}
.blogContentGroup[data-children-secondary] > div > aside > p {
	align-self: flex-start;
}
@media (min-width:600px) and (max-width:1024px){
	.blogContentGroup[data-children="1"] > div > aside > p {
		align-self: center;
	}
	.blogContentGroup[data-children="3"] > div > aside > p {
		align-self: flex-start;
	}
	.blogContentGroup[data-children="1"] >div{
		grid-template-columns: 1fr 1fr;
	}
	.blogContentGroup[data-children="2"],
	.blogContentGroup[data-children="3"] {
		grid-template-columns: 1fr;
	}
	.blogContentGroup[data-children="4"] {
		grid-template-columns: 1fr 1fr;
	}
	.blogContentGroup .imagePositionbelow figure {
		order: 0;
	}
}
@media (max-width: 600px){
	.blogContentGroup[data-children="2"],
	.blogContentGroup[data-children="3"],
	.blogContentGroup[data-children="4"]{
		grid-template-columns: 1fr;
	}
	.blogContentGroup[data-children="2"] >div{
		grid-auto-flow: row;
		grid-template-rows: minmax(min-content, max-content); 
		grid-template-columns: 1fr;
	}
	.blogContentGroup[data-children-secondary] > div,
	.blogContentGroup[data-children="1"] > div{
		grid-auto-flow: row;
		grid-template-columns: 1fr;
	}
	.blogContentGroup[data-children-secondary] > div > figure > img,
	.blogContentGroup[data-children="1"] > div > figure img,
	.blogContentGroup[data-children="2"] > div > figure img{
		min-height: min(calc(55vw), calc(var(--width) * .20));
	} 
	.blogContentGroup .imagePositionright figure,
	.blogContentGroup .imagePositionbelow figure{
		order: 0;
	}
	.blogContentGroup[data-children-secondary] > div.imagePositionright {
		grid-template-columns: 1fr;
	}
	.blogContentGroup[data-children-secondary] > div.imagePositionright > figure {
		order: 0 ;
	}
	.blogContentGroup[data-children="2"] .imagePositionabove > figure{
		height: auto;
	}
	.blogContentGroup[data-children-secondary] > div > aside > p,
	.blogContentGroup[data-children="1"] > div > aside > p {
		align-self: center;
	}
}

/* LEGACY BLOG CLASSES */
.LegacyRow {
	column-gap: calc(var(--gap) * 2);
}
@media (min-width: 1000px) {
	.LegacyRow[data-children="3"],
	.LegacyRow[data-children="4"] {
		display: flex;
	}
}
@media (min-width: 700px) {
	.LegacyRow[data-children="2"] {
		display: flex;
	}
}
.LegacyRow > * {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
}
.LegacyCard {
	/* background: yellow; */
	margin: 0;
	display: flex;
	flex-direction: column;
	row-gap: var(--gap);
}
.LegacyRow img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
.LegacyRow .RichText {
	padding: 0 !important;
	margin: 0 !important;
}
.LegacyRow .RichText li > p {
	display: inline;
}
.LegacyRow .RichText p + h2 {
	padding-top: 1em;
}
.LegacyRow .RichText hr {
	display: none;
}
.LegacyRow video {
	width: 100%;
}
.LegacyRow .LegacyVideoIframe {
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
}
.LegacyRow .LegacyVideoIframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




 /* CONTENT GROUP (hh-content-group.css)
------------------------------------------------------ */
.contentGroupWrapper{
	display: flex;
	flex-direction: column;
	scroll-margin-top: 100px;
}
.ContentGroup {
	display: grid;
	grid-template-columns: repeat(var(--contentGroup-length), 1fr);
	grid-gap: var(--gap);
	box-sizing: border-box;
	/* margin-top: var(--gap); */
}
.ContentGroup > .ContentCard {
	display: grid;
	cursor:var(--cursor-style) ;
	grid-template-rows: minmax(min-content,max-content);
	text-decoration: none;
}
.ContentGroup > .ContentCard[data-video-present='true'] {
	grid-template-rows: 17rem auto;
}
.ContentGroup > .ContentCard > figure,
.ContentGroup > figure {
	align-self: stretch;
	height:min(calc(100vw * .2), calc(var(--width) * .17));
	object-fit: cover;
	/* background: var(--hh-grey); */
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	/* box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee; */
}
.ContentGroup > .ContentCard > figure img,
.ContentGroup > figure > img {
	flex-grow: 1;
	width: 100%;
	object-fit:var(--object-fit);
}

.ContentGroup.Portrait[data-children="4"] > .ContentCard > figure,
.ContentGroup.Portrait[data-children="5"] > .ContentCard > figure{
	position: relative;
	padding-bottom: 133%;
}

.ContentGroup.Portrait[data-children="4"]> .ContentCard > figure > img,
.ContentGroup.Portrait[data-children="5"]> .ContentCard > figure > img  {
	object-fit: var(--object-fit, cover);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ContentGroup > .ContentCard > aside {
	display: flex;
	flex-direction: column;
	align-items: var(--items-alignment);
	text-align: var(--text-alignment);
	padding: 1.125rem 0;
}
.ContentGroup > .ContentCard > aside p {
	/* min-height: 4.5rem; REMOVED FOR SM-145 - 04/29/24 */
	line-height: 1.5;
}
.content-group-cta{
	align-self: center;
	padding: var(--gap) 0;
}
.content-group-cta a:hover{
	text-decoration: none;
}
.ContentGroup > .ContentCard > aside p:nth-child(3) {
	margin-top: auto;
}
.ContentGroup > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
}
.RichText.contentgroup-richText p:empty {
	display: block !important;
}

.ContentGroup .contentgroup-richText {
	text-align: var(--text-alignment);
	align-self: center;
	width: 100%;
}

.RichText.contentgroup-richText {
	padding: 0 !important;
}
.ContentGroup > .ContentCard > aside :empty{
	display: none;
}
@media (min-width: 600px) and (max-width:1284px) {
	.ContentGroup[data-children="4"],
	.ContentGroup[data-children="5"] {
		grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
	}
}
@media (max-width: 600px) {
	.ContentGroup{
		grid-template-columns: 1fr;
	}
	
	.ContentGroup > .ContentCard{
		grid-template-columns: auto;
		grid-template-rows: minmax(min-content, max-content);
	}
	.ContentGroup > .ContentCard > figure,
	.ContentGroup > figure {
		min-height: min(calc(55vw), calc(var(--width) * .11));

	}
}
@media (min-width:600px) and (max-width:1024px) {
	.ContentGroup > .ContentCard > aside{
		margin: 1.125rem auto;
		padding: 0;
	}
}




 /* CONTENT SHELF (hh-content-shelf.css)
------------------------------------------------------ */
.ContentShelf.Grid.Shelf {
	grid-column: 1 / 3;
	grid-row: 2/2;
}
.ContentShelf > .ContentCard {
	display: grid;
	grid-template-rows: 17rem auto;
	text-decoration: none;
	cursor: var(--cursor-style);
}
.ContentSelf-container{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.5em;
	scroll-margin-top: 100px;
}
.ContentSelf-container .Light{
	grid-column: 1/ 3;
	grid-row: 2/3;
}
.ContentSelf-container .Grid.Shelf {
	grid-column: 1 / 3;
	grid-row: 3/4;
}
.ContentShelf > .ContentCard > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	background: var(hh-grey);
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	/* box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee; */
}
.ContentShelf > .ContentCard > figure img{
	flex-grow: 1;
	width: 100%;
	object-fit: var(--object-fit, cover);
	height: 100%;
	margin-bottom: 0;
}
.ContentShelf > .ContentCard > aside {
	display: flex;
	flex-direction: column;
	align-items: var(--items-alignment);
	text-align: var(--text-alignment);
	padding: 1.125rem 0;
}

.ContentShelf > .ContentCard > aside p:nth-child(3) {
	margin-top: auto;
}
.ContentShelf > .ContentCard > aside :empty{
	display: none;
}

@media (max-width: 600px) {
	.ContentSelf-container{
		display: block;
	}
	.ContentSelf-container .Light{
		margin-bottom: 1em;
	}
	.ContentShelf > .ContentCard{
		grid-template-columns: auto;
		grid-template-rows: 17rem auto;
	}
	.ContentShelf > .ContentCard > figure img{
		min-height: min(calc(55vw), calc(var(--width) * .11));
	}
}




/* TAB (hh-tab.css)
------------------------------------------------------ */
.tab-group-section .buttonWrapper {
	display: flex;
}
.tab-group-section .tab-button {
	flex-grow: 1;
	padding: calc(var(--gap) * .5);
	background-color:var(--hh-white);
	border-top: 1px solid var(--hh-grey);
	border-right: 1px solid var(--hh-grey);
	border-left: 1px solid var(--hh-grey);
}
.tab-group-section .ThemeRed {
	border-bottom: 0.375em solid var(--hh-red);
}
.tab-group-section .ThemePro {
	border-bottom: 0.375em solid var(--hh-pro);
}

.tab-group-section .ThemeGrey {
	border-bottom: 0.375em solid var(--hh-grey);
}
.tab-group-section .ThemeDark-Grey {
	border-bottom: 0.375em solid var(--hh-dark-grey);
}
.tab-group-section .ThemeYellow {
	border-bottom: 0.375em solid var(--hh-yellow);
}
.ThemeDark-Grey {
	background-color:var(--hh-dark-grey) ;
	color: var(--hh-white);
}
.tab-group-section .active {
	background-color: inherit;
	color: inherit;
}
.tab-button.active {
	border: 0;
}
.tab-group-section a.tab-button:hover {
	text-decoration: none;
}
.tab-group-section .content {
	display: none;
	padding: 10px 20px;
}
.tab-group-section .content.active {
	display: block;
}
.tab-group-section .wrapper{
	position: relative;
}
.tab-group-section .dropDown{
	transform: translateY(calc(var(--gap) * 2));
	top: 0;
	display: flex;
	flex-direction: column;
	position: absolute;
	right: 0;
	padding: 0;
	margin: auto 0;
	color: inherit;
	background-color: inherit;
}
@media(min-width:600px) and (max-width:1024px) {
	.tab-group-section .dropDown {
		transform: translateY(calc(var(--gap) * 3));
	}
}
@media (max-width:600px) {
	.tab-group-section{
		padding: calc(var(--gap) * 2) 0;
	}
	.tab-group-section .buttonWrapper{
		flex-direction: column;
	}
	.tab-group-section .dropDown {
		margin: 0;
		position: unset;
		transform: unset;
	}
	.tab-group-section .showMore{
		
	}
	.tab-group-section .activeshowMore{
		display: block !important;
		padding: calc(var(--gap) * 2) var(--gap);
	}
	.tab-group-section .tab-button.divActive{
		color: inherit;
	}
	.tab-group-section .tab-button.divActive::after{
		content: " - ";
		border-radius: 50%;
		border: 1px solid;
		font-size: 1.5em;
		float: right;
		text-align: center;
		height: 19px;
		width: 20px;
		color: inherit;
		float: right;
		margin-left: 5px;
	}
	.tab-group-section .tab-button::after{
		content: "+";
		color: inherit;
		border-radius: 50%;
		border: 1px solid;
		border-radius: 50%;
		font-size: 1.5em;
		float: right;
		text-align: center;
		height: 19px;
		width: 20px;
		float: right;
		margin-left: 5px;
	}
	.tab-group-section .content.active{
		display: none;
	}
	.tab-group-section .ThemeRed,
	.tab-group-section .ThemePro,
	.tab-group-section .ThemeGrey,
	.tab-group-section .ThemeDark-Grey,
	.tab-group-section .ThemeYellow{
		border-bottom:1px solid var(--hh-grey);
	}
}

/* NEW TABS CSS (ACCESSIBILTY FIXES - DECEMBER 2024) */
.tab-button:not(.active) {
	color: var(--hh-black);
}
.tab-group-section > div > * > div {
	color: var(--hh-black);
}
.tab-group-section > div > .ThemeRed .Button:not(.ButtonLoading) {
	color: var(--hh-white);
	border-color: var(--hh-white);
	background: var(--hh-red) !important;
}
.tab-group-section > div > .ThemeRed .Button.ButtonLoading {
	background-image: url('/_svg/hh-loader.white.svg') !important;
	background-color: var(--hh-red);
	border-color: var(--hh-white);
}
.tab-group-section > div > .ThemeRed .ButtonSecondary:not(.ButtonLoading) {
	color: var(--hh-red);
	border-color: var(--hh-red);
	background: var(--hh-white) !important;
}
.tab-group-section > div > .ThemeRed .ButtonSecondary.ButtonLoading {
	background-image: url('/_svg/hh-loader.red.svg') !important;
	background-color: var(--hh-white);
	border-color: var(--hh-red);
}
@media (max-width:600px) {
	.tab-group-section .activeshowMore:has(.Form) {
		background: var(--hh-white);
		color: var(--hh-black);
	}
	.tab-group-section .activeshowMore:has(.Form) label {
		color: var(--hh-black) !important;
	}
	.tab-group-section .Form.UltraNarrow {
		margin-top: 0;
	}
}




/* CONTENT GRID (hh-content-grid.css)
------------------------------------------------------ */
.ContentGrid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	scroll-margin-top: 200px;
}

.ContentGrid[data-children="8"] > .ContentCard,
.ContentGrid[data-children="7"] > .ContentCard {
	flex: 1 1 19em;
}
.ContentGrid[data-children="6"] > .ContentCard,
.ContentGrid[data-children="5"] > .ContentCard,
.ContentGrid[data-children="4"] > .ContentCard,
.ContentGrid[data-children="5"] > .ContentCard {
	flex: 1 1 24em;
}
.ContentGrid > .ContentCard {
	display: grid;
	cursor: var(--cursor-style);
	flex: 1 1 16em;
	grid-template-rows: 17rem auto;
	text-decoration: none;
}
.ContentGrid-container{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.5em;
}
.ContentGrid > .ContentCard > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	background: var(--hh-grey);
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
}
.ContentGrid > .ContentCard > figure img{
	flex-grow: 1;
	width: 100%;
	object-fit: cover;
	margin-bottom: 0;
}
.ContentGrid > .ContentCard > aside {
	display: flex;
	flex-direction: column;
	align-items: var(--items-alignment);
	text-align: var(--text-alignment);
	padding: 1.125rem 0;
}
.ContentGrid > .ContentCard > aside p:nth-child(3) {
	margin-top: auto;
}
.ContentGrid > .ContentCard > aside :empty{
	display: none;
}

@media (min-width:600px) and (max-width: 1024px) {
	.ContentGrid > .ContentCard{
		flex: 1 1 15em !important;
	}
}
@media (max-width: 600px) {
	.ContentGrid > .ContentCard{
		flex: 1 1 11em !important;
	}
	.ContentGrid > .ContentCard > figure img{
		min-height: min(calc(55vw), calc(var(--width) * .11));
	}
}




/* TEXT BLOCK (hh-text-block.css)
------------------------------------------------------ */
.textBlockSection{
	display: flex;
	text-align:var(--text-alignment) ;
	align-items: var(--items-alignment);
	flex-direction: column;
	background-color: var(--background-color);
	gap: var(--gap);
}
.textBlockSection > a{
	align-self: var(--text-alignment);
	text-decoration: none;
}

.textBlockSection .Button.ButtonPrimary,
.textBlockSection .Button.ButtonSecondary::after{
	background:var(--button-accent-colour);
}

.textBlockSection .Button.ButtonSecondary{
	border-color:var(--button-accent-colour),;
	color: var(--button-accent-colour);
}

.textBlockSection .RichText{
	padding: 0 !important;
	color: var(--text-colour);
}
.textBlockSection .RichText td,
.textBlockSection .RichText th{
	text-align: initial;
	padding: calc(var(--gap) / 2);
}
.textBlockSection .RichText a.inline-cta {
	margin-left: 0.8rem;	
}




/* NAVIGATION IN CONTENT (hh-navigation-in-content.css)
------------------------------------------------------ */
.Navigation {
	overflow-x: auto;
	/* padding-block: 0; */
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	margin: auto;
	padding: 0 !important;
	max-width: 1600px;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.Navigation::-webkit-scrollbar {
	display: none;
}
.Navigation > ul {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0 1.5rem;
	white-space: nowrap;
}
.Navigation li a {
	display: block;
	padding: .5rem 0;
	border-bottom: 2px solid transparent;
	font-size: 1.125rem;
}
.Navigation li a:hover,
.Navigation li a.active {
	text-decoration: none;
	border-bottom: 2px solid var(--hh-red);
}
.NavigationLeft, .NavigationRight {
	-webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg,rgba(255,255,255,1) 2em,rgba(255,255,255,0) 100%);
    color: var(--hh-red);
    position: absolute;
    left: 0;
    border: 0;
    height: 3.625em;
    /* width: 1em; */
    padding-inline: 1.35em;
    transition: transform .35s ease-in-out,opacity .35s ease-in-out;
    opacity: 0;
    font-weight: bolder;
    margin: -1px 0 0 !important;
	/* transform: translateX(-2rem); */  /* NAVIGATION FIX FOR STORE PROFILE - 11/27/24 */
}
.NavigationLeft:not(.active),
.NavigationRight:not(.active) {
	display: none;
}
/* NAVIGATION FIX FOR STORE PROFILE - 11/27/24 */
/* .TrendingSearch .NavigationLeft, .NavigationRight {
	height: 4em;
	margin: 2px 0 0 !important;
} */
.NavigationRight {
	right: 0;
	left: auto;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 1.15em);
	/* transform: translateX(2rem); */  /* NAVIGATION FIX FOR STORE PROFILE - 11/27/24 */
}
.NavigationLeft.active, .NavigationRight.active {
	opacity: 1;
	transform: translateX(0);
	cursor: pointer;
}
@media (min-width: 1600px) {
	.NavigationLeft {
		left: max(calc(((100vw - var(--width)) /2)), var(--gap));
	}
	.NavigationRight {
		right:max(calc(((100vw - var(--width))/2)), var(--gap));
	}
}

@media (max-width: 1049px) {
	.Navigation .Icon {
		height: 1em !important;
		width: 1em !important;
	}
	/* NAVIGATION FIX FOR STORE PROFILE - 11/27/24 */
	/* .NavigationLeft, .NavigationRight {
		margin: -5px 0 0 !important; 
	} */
	.TrendingSearch .NavigationLeft, .NavigationRight {
        /* margin: 0 !important; */
    }
}
@media (max-width: 1600px) and (min-width: 600px) {
	.Navigation {
		padding: 0 calc(var(--gap) / 2) !important;
	}
}




/* TEXT SEPARATOR (NEW IN MY ACCOUNT)
------------------------------------------------------ */
.TextSeperator {
	display: flex;
	align-items: center;
	text-align: center;
}
.TextSeperator::before,
.TextSeperator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #000;
}
.TextSeperator:not(:empty)::before {
	margin-right: .5em;
}
.TextSeperator:not(:empty)::after {
	margin-left: .5em;
}




/* TABLE KEY VALUES (NEW IN MY ACCOUNT)
------------------------------------------------------ */
.TableKeyValues {
    width: 100%;
}
.TableKeyValues tr td:last-child {
    text-align: right;
	white-space: nowrap;
}
hh-panel .TableKeyValues {
	border-spacing: 0.25em;
}
hh-panel .TableKeyValues tr td {
	vertical-align: top;
	line-height: 1.8;
}
hh-panel .TableKeyValues tr td:first-child {
	width: 50%;
}
hh-panel .TableKeyValues tr td:last-child {
	white-space: normal;
	text-wrap: balance;
}
hh-panel .TableKeyValues tr td:last-child small {
	line-height: 1.2;
	display: block !important;
	white-space: normal;
	text-wrap: balance;
}




/* EMAIL POPUP CSS (NEW IN MY ACCOUNT)
------------------------------------------------------ */
dialog > .TwoUp {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: var(--gap);
	height: auto;
}
dialog > button {
	position: absolute;
	right: 0;
	top: 0;
	padding: calc(var(--gap) / 2);
	margin: 0 !important;
	background: none;
	border: 0;
	cursor: pointer;
	z-index: +1;
}
dialog > button > img.Icon.Bigger {
	padding-right: 0 !important;
}
.TwoUp > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	background: var(--hh-grey);
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	overflow: hidden;
}
dialog > .TwoUp > figure {
	margin-block: -1.2rem;
	margin-left: -1.2rem;
	border-radius: 0.3rem 0 0 0.3rem;
}
.TwoUp  > figure > img {
	flex-grow: 1;
	width: 100%;
	object-fit: cover;
}
.TwoUp > section > h1 {
	font-size: 2.5rem;
	line-height: 1;
	padding-bottom: calc(var(--gap) / 3);
}
.TwoUp > section > h1 > span {
	font-size: 3.5rem;
	color: var(--hh-red);
}
.TwoUp > section > hgroup > p {
	color: var(--hh-dark-grey);
	line-height: 1.3;
	padding-bottom: 0;
}
.TwoUp > section > .Form > fieldset {
	padding-bottom: calc(var(--gap) / 2);
}
.TwoUp > section > .Form label {
	margin-bottom: calc(var(--gap) / 6) !important;
	cursor: pointer;
	line-height: 1.2;
}
.TwoUp > section .FormChecklist {
	text-transform: inherit;
}
.TwoUp > section > div > p {
	line-height: 1.2;
}
.TwoUp > section > div > p > a {
	color: var(--hh-black) !important;
	text-decoration: underline !important;
}
.TwoUp > section > div.EmailTerms {
	display: flex;
	justify-content: space-evenly;
}
@media (max-width: 600px) {
	.TwoUp,
	dialog > .TwoUp {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}
	.TwoUp > figure {
		aspect-ratio: 2/1;
		margin-block: 0;
		margin-left: 0;
		border-radius: 0.4rem 0.4rem 0 0;
	}
	dialog > .TwoUp > figure {
		margin: 0 !important;
		border-radius: 0;
	}
	dialog:has(figure) > button {
		background: var(--hh-white) !important;
	}
}




/* TWO UP (NEW IN MY ACCOUNT)
------------------------------------------------------ */
.TwoUp {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: var(--gap);
	height: auto;
}
dialog > .OneUp {
	grid-template-columns: 1fr;
}
.TwoUp > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	background: var(--hh-grey);
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	overflow: hidden;
}
dialog > .TwoUp > figure {
	margin-block: -1.2rem;
	margin-left: -1.2rem;
	border-radius: 0.3rem 0 0 0.3rem;
}
.TwoUp  > figure > img {
	flex-grow: 1;
	width: 100%;
	object-fit: cover;
}
.TwoUp > section > h1 {
	font-size: 2.5rem;
	line-height: 1;
	padding-bottom: calc(var(--gap) / 3);
}
.TwoUp > section > h1 > span {
	font-size: 3.5rem;
	color: var(--hh-red);
}
.TwoUp > section > hgroup > p {
	color: var(--hh-dark-grey);
	line-height: 1.3;
	padding-bottom: 0;
}
.TwoUp > section > .Form > fieldset {
	padding-bottom: calc(var(--gap) / 2);
}
.TwoUp > section > .Form label {
	margin-bottom: calc(var(--gap) / 6) !important;
	cursor: pointer;
	line-height: 1.2;
}
.TwoUp > section > div > p {
	line-height: 1.2;
}
.TwoUp > section > div.EmailTerms {
	display: flex;
	justify-content: space-evenly;
}
@media (max-width: 600px) {
	.TwoUp,
	dialog > .TwoUp {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}
	.TwoUp > figure {
		aspect-ratio: 2/1;
		margin-block: 0;
		margin-left: 0;
		border-radius: 0.4rem 0.4rem 0 0;
	}
	dialog > .TwoUp > figure {
		margin: 0 !important;
		border-radius: 0;
	}
}




/* THREE UP (NEW IN MY ACCOUNT)
------------------------------------------------------ */
.ThreeUp {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: calc(var(--gap) * 1.5);
}
.ThreeUp:has(.IconWithContent) {
	grid-template-rows: auto auto;
}
.ThreeUp > .IconWithContent {
	display: grid;
	grid-row: auto/span 2;
	grid-template-rows: subgrid;
	background: var(--hh-white);
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
	border: 1px solid var(--hh-medium-grey);
	border-radius: 6px;
	overflow: hidden;
	padding-block: 0 !important;
	gap: 0;
}
.ThreeUp > .IconWithContent > div {
	padding: var(--gap) calc(var(--gap) * 1.5);
	display: block;
}
.ThreeUp > .IconWithContent > div > * {
	padding: 0;
	margin: 0;
}
.ThreeUp > .IconWithContent > div:has(img) {
	background: var(--icon-text-group-bgColor);
	padding: calc(var(--gap) / 3);
	margin: 0;
	color: var(--hh-white);
	display: flex;
	align-content: center;
	justify-content: center;
}
.ThreeUp > .IconWithContent > div:has(img) > img {
	height: 2em;
	width: auto;
}
.ThreeUp > .IconWithContent h2,
.ThreeUp > .IconWithContent h3,
.ThreeUp > .IconWithContent h4 {
	margin: 0;
	padding-bottom: calc(var(--gap) / 2);
}
.ThreeUp > .IconWithContent > div p + p,
.ThreeUp > .IconWithContent > div ul + p {
	padding-top: calc(var(--gap) / 4);
}
.ThreeUp > .IconWithContent > div > p a {
	white-space: nowrap;
}
.ThreeUp > .IconWithContent > div > ul {
	margin-bottom: 0;
	padding-left: 1em;
}
.IconWithContent > div > ul > li > p {
	padding: 0;
}




/* ERROR PAGES
------------------------------------------------------ */
.ErrorPage > h1 {
	margin-bottom: var(--gap);
}
.ErrorPage > h3 + h3 {
	margin-top: calc(var(--gap) / 2);
}
.ErrorPage > h3:has(.Icon.Bigger) {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: end;
}
.ErrorPage > h3 > .Icon.Bigger {
	width: 2rem !important;
	height: 2rem !important;
	vertical-align: middle;
}
.ErrorPage > div.Center:has(a) {
	display: flex;
	gap: calc(var(--gap) / 2);
	margin-top: calc(var(--gap) * 1.5);
	justify-content: center;
	flex-wrap: wrap;
}
.ErrorPage > div.Center > a {
	white-space: nowrap;
}
.Narrow.ErrorImages {
	display: flex;
	gap: calc(var(--gap) / 2);
}
.Narrow.ErrorImages > a,
.Narrow.ErrorImages > .imageContentSection {
	flex: 1 1 0; /* default equal width */
	padding: 0;
	box-sizing: border-box;
}
.Narrow.ErrorImages > section {
	padding: 0;
}
@media (max-width: 800px) {
	.Narrow.ErrorImages {
		margin-inline: var(--gap);
	}
	.Narrow.ErrorImages {
		display: grid;
		gap: calc(var(--gap) / 2);
		grid-template-rows: repeat(2, 1fr);
		grid-template-columns: repeat(2, 1fr);
	}
	.Narrow.ErrorImages > * img {
		width: 100%;
		height: auto;
		display: block;
	}
	.ErrorPage > h3:has(.Icon.Bigger) {
		display: inline-block;
	}
}