.tabArea.alignfull.has-background
{
	padding: 0;

	display: grid;
	gap: 0 2px;
}

.tabAreaTab
{
	background: var(--wp--preset--color--light-text-background);
	text-align: center;
	padding: 20px;
	cursor: pointer;
	margin-top: var(--wp--custom--v-pad);
}

.tabArea:first-child
{
	margin-top: 0;
}

.tabArea .title
{
	font-size: var(--wp--preset--font-size--twentyfive);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--background);
}

.tabArea .sub
{
	color: #939598;
}

.tabArea .tabContent
{
	background: var(--background);
	color: var(--text);

	display: grid;
	grid-template-columns: var(--wp--custom--h-inset) 1fr var(--wp--custom--h-inset);
	grid-template-rows: minmax(40px, 1fr) auto auto auto minmax(40px, 1fr);
	grid-template-areas: "l t r" "l content r" "l play r" "l link r" "l b r";
	gap: 40px;

	position: relative;
}

.tabArea .background
{
	position: absolute;
	inset: 0;
	mix-blend-mode: luminosity;
	opacity: 0.15;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tabArea .wp-block-button
{
	grid-area: link;
	position: relative;

	align-self: center;
	justify-self: center;
}

.tabArea .showYoutube
{
	grid-area: play;
	align-self: center;
	justify-self: center;
	position: relative;

	background: none;
	border: none;
	cursor: pointer;

	width: 100px;
}

.tabArea .content
{
	grid-area: content;
	position: relative;
}

dialog.tabVideo::backdrop
{
	background: #1C50A1BB;
}

dialog.tabVideo[open]
{
	margin: 0 auto;
	padding: 5px;
	border: 0;
	background: none;
	max-width: calc(100svw - 30px);
	max-height: calc(100svh - 30px);
	height: 100vh;
	width: 100vw;

	display: grid;
	gap: 5px;
	grid-template-rows: auto 1fr;
	align-items: center;
	justify-items: end;
}

#closeeghstytp
{
	background: none;
	border: none;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1em;
	cursor: pointer;
}

#eghstytp
{
	justify-self: center;
}

@media (min-width: 580px)
{
	.tabArea .tabContent
	{
		grid-template-columns: var(--wp--custom--h-inset) 1fr 1fr var(--wp--custom--h-inset);
		grid-template-rows: minmax(40px, 1fr) auto auto minmax(40px, 1fr);
		grid-template-areas: "l t t r" "l content content r" "l link play r" "l b b r";
		gap: 40px;
	}
}

@media (min-width: 800px)
{
	.tabArea .tabContent
	{
		grid-template-columns: var(--wp--custom--h-inset) 1fr 40px 1fr var(--wp--custom--h-inset);
		grid-template-rows: minmax(40px, 1fr) auto auto minmax(40px, 1fr);
		grid-template-areas: "l t t t r" "l content g play r" "l link g play r" "l b b b r";
		gap: 0;
	}

	.tabArea .wp-block-button
	{
		margin-top: 40px;
		align-self: unset;
		justify-self: start;
	}

	.tabArea .showYoutube
	{
		width: unset;
	}

	.tabArea .content
	{
		font-size: var(--wp--preset--font-size--thirty);
	}
}

@media (min-width: 1100px)
{
	.tabArea
	{
		grid-template-columns: repeat(var(--tabCount), 1fr);
	}

	.tabAreaTab
	{
		margin-top: 0;
	}

	.tabAreaTab.selected
	{
		background: var(--background);
	}

	.tabAreaTab.selected .title
	{
		color: var(--text);
	}

	.tabAreaTab.selected .sub
	{
		color: #D1D3D4;
	}

	.tabArea .tabContent
	{
		grid-row: 2;
		grid-column: 1/-1;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0s ease 0.3s, visibility 0s ease 0.3s;
	}

	.tabAreaTab.selected + .tabContent
	{
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s linear, visibility 0s ease 0s;
		z-index: 1;
	}
}

@media (hover: hover)
{
	#closeeghstytp:not(:hover)
	{
		opacity: 0.8;
	}
}

@media (hover: hover) and (min-width: 1100px)
{
	.tabAreaTab:not(.selected):hover
	{
		background: var(--wp--preset--color--strong-text-background)
	}
}