:where(.input-panel.content)
{
	--text-input-size	: 24rem;
	--text-input-size	: auto;
	--highlight-size	: 0.25rem;
	--gap	: 1rem;
	
	display	: grid;
	grid-template-rows	: auto var(--highlight-size);
	grid-template-columns	: 1fr;
	
	&>:where(form)
	{
		margin	: 2rem 10% 2rem 10%;
		
		justify-self	: stretch;
		display	: grid;
		grid-template-rows	: 1fr;
		grid-template-columns	: max-content auto max-content;
		column-gap	: var(--gap);
		place-items	: stretch;
		place-content	: stretch;
		&>:where(*)
		{
			grid-row	: 1;
		}
		
		&>:where(.label)
		{
			display	: grid;
			align-items	: center;
			justify-self	: end;
		}
		
		
	}
	
	background	: white;
	
	&>:where(.highlight)
	{
		background	: var(--bs-secondary);
	}
}

:where(.list.content)
{
	:where(.xxl, .xl, .lg) &
	{
		--title-size	: 1em;
		--subtitle-size	: 1em;
		--gap	: 5rem;
		--column-count	: 1;
		--item-aspect-ratio	: auto;
		--item-picture-aspect-ratio	: 3/4;
		--highlight-size	: 0.25rem;
		--badge-size	: auto;
	}
	
	:where(.md, .sm, .xs) &
	{
		--title-size	: 1.2rem;
		--subtitle-size	: 1rem;
		--gap	: 2.5rem;
		--column-count	: 1;
		--item-aspect-ratio	: auto;
		--item-picture-aspect-ratio	: 3/4;
		--highlight-size	: 0.2rem;
		--badge-size	: auto;
	}
	
	--highlight-background	: var(--bs-primary);
	
	display	: grid;
	grid-template-columns	: repeat(var(--column-count), 1fr);
	gap	: var(--gap);



	:where(&>.item)
	{
		aspect-ratio	: var(--item-aspect-ratio);
		
		display	: grid;
		
		grid-template-columns	: 1fr;
		grid-template-rows	:
			[badge-start]
				var(--badge-size)
			[badge-end highlight-start]
				var(--highlight-size)
			[highlight-end content-start]
				minmax(8em, auto)
			[content-end]
		;
		
		:where(&>*)
		{
			grid-column	: 1;
		}
		
		:where(&>.picture)
		{
			display	: none;
		}
		
		:where(&>._badge)
		{
			grid-row	: badge;
			justify-self	: end;
			align-self	: end;
			margin-right	: 1rem;
		}
		
		:where(&>.highlight)
		{
			grid-row	: highlight;
			background	: var(--highlight-background);
		}
		
		:where(&>.content)
		{
			grid-row	: content;
			place-self	: stretch;
			align-self	: stretch;
			background	: var(--content-background);
			color		: var(--content-color);
			----font-size	: 1.5rem;
			padding		: 1rem;
			
			:where(&>p)
			{
				margin	: 0;
			}
		}
		
		:where(&>._badge)
		{
			padding	: 0.25rem 1rem 0 1rem;
			border-radius	: 0.25rem 0.25rem 0 0;
		}
		
		:where(&>.picture)
		{
			aspect-ratio	: var(--item-picture-aspect-ratio);
		}
		
		:where(&>._badge)
		{
			background	: var(--badge-background);
			color		: var(--badge-color);
		}
		
		:where(&>*)
		{
			transition	: all 0.2s;
		}
		
		--content-color	: black;
		--content-background	: white;
		--badge-color	: black;
		--badge-background	: var(--bs-primary);
		
		&:hover
		{
			--content-color		: var(--bs-secondary);
			--badge-color		: var(--bs-primary);
			--badge-background	: var(--bs-secondary);
			--highlight-background	: var(--bs-secondary);
		}
	}


}

:where(._pagination)
{
	display	: grid;
	
	grid-auto-columns	: 2.4rem;
	grid-auto-flow	: column;
	gap	: 0.5rem;
	
	justify-self	: end;
	
	place-items	: stretch;
	
	:where(&>.item)
	{
		font-size	: 0.8rem;
		aspect-ratio	: 1/1;
		border-radius	: 50rem;
	}
	
	:where(&>.skipped)
	{
		text-align	: center;
	}
}