:where(#news-list.content)
{
	:where(.xxl, .xl, .lg) &
	{
		--title-size	: 1.5rem;
		--subtitle-size	: 1rem;
		--gap	: 5rem;
		--column-count	: 3;
		--item-aspect-ratio	: 11/12;
		--item-picture-aspect-ratio	: 4/3;
		--highlight-size	: 0.25rem;
	}
	
	:where(.md, .sm, .xs) &
	{
		--title-size	: 1.2rem;
		--subtitle-size	: 1rem;
		--gap	: 2.5rem;
		--column-count	: 2;
		--item-aspect-ratio	: 2/3;
		--item-picture-aspect-ratio	: 4/3;
		--highlight-size	: 0.2rem;
	}
	
	--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	:
				[picture-start]
					min-content
				[picture-end highlight-start]
					var(--highlight-size)
				[highlight-end content-start]
					1fr
				[content-end]
			;
			
			:where(&>*)
			{
				grid-column	: 1;
			}
			
			:where(&>.picture)
			{
				grid-row	: picture;
				place-self	: stretch;
				align-self	: stretch;
				min-width	: 0;
				display	: grid;
				grid-template-columns	: 1fr;
				grid-template-rows	: 1fr;
				
				place-items	: stretch;
				place-content	: stretch;
				
				:where(&>img)
				{
					
				}
			}
			
			:where(&>.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(&>._badge)
			{
				grid-row	: picture;
				justify-self	: end;
				align-self	: start;
				padding	: 0.5rem;
			}
			
			: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);
				------content-background	: var(--bs-primary);
				--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;
	}
}