@import url("standard-presets.css");
@import url("standard-maps.css");
@import url("standard-supports.css");
@import url("standard-defaults.css");

:where(.basic-kv-banner.zone)
{
	--kv-size	: 12rem;
	--badge-color	: var(--bs-primary);
	
	display	: grid;
	grid-template-rows	:
		[kv-start]
			var(--kv-size)
		[kv-end]
	;
	
	background	: var(--bs-secondary);
	
	&>:where(._badge)
	{
		grid-row	: kv;
		justify-self	: end;
		align-self	: end;
		background	: var(--badge-color);
		padding	: 0.25rem 1rem 0 1rem;
		border-radius	: 0.5rem 0 0 0;
		margin-right	: 1.5rem;
	}
	
}

:where(.title-banner.zone)
{
	--highlight-size	: 0.5rem;
	--title-size	: auto;
	
	--highlight-color	: var(--bs-primary);
	row-gap	: 0;
	
	display	: grid;
	grid-template-rows	:
		[highlight-start]
			var(--highlight-size)
		[highlight-end title-start]
			var(--title-size)
		[title-end]
	;
	
		
	
	&>:where(.highlight)
	{
		grid-row	: highlight;
		place-self	: stretch;
		background	: var(--highlight-color);
	}
	
	&>:where(.title)
	{
		grid-row	: title;
		align-self	: center;
		justify-self	: start;
		
		padding	: 2.5rem 0;
	}
}

:where(.zone[data-leaf])
{
	padding-top	: 0;
}

:where(.content.main-content-and-aside)
{
	
	display	: grid;
	
	:where(.xs, .sm, .md) &
	{
		grid-template-areas	:
			"content"
		;
		
		grid-template-columns	: 1fr;
		grid-template-rows	: auto;
	}
	
	:where(.lg, .xl, .xxl) &
	{
		grid-template-areas	:
			"content aside"
		;
		
		grid-template-rows	: auto;
		
		grid-template-columns	: 2fr 1fr;
		
		column-gap	: 5rem;
		
	}
	
	:where(&>.main-content)
	{
		grid-area	: "content";
	}
	
}