/* Frontpage-specific styles */

body
{
	position: relative;
	background-image: url('../images/pattern-1.jpg');
	background-size: 278px 512px;
}

@media (prefers-color-scheme: dark)
{
	body::after
	{
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		pointer-events: none;
		z-index: 0;
	}
	#mainContainer
	{
		position: relative;
		z-index: 1;
	}
}

/* Header */

header
{
	padding-bottom: 0;
}

/* Articles grid */

ul.articles
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
}

main section
{
	margin-bottom: 2em;
}

main section li
{
	list-style-type: none;
	padding: 0;
	margin: 0;	
}

.articles li h3
{
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: .25em;
}
.articles li h3 time
{
	color: var(--subtle);
	font-size: .8333em;
}
.articles li h3 a
{
	color: var(--link);
	border-color: var(--link-subtle);
}
.articles li h3 a:hover
{
	color: var(--link-strong);
	border-color: var(--link);
}

.articles li img
{
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	object-position: 50% 50%;
	margin-bottom: .6em;
	border-radius: .25em;
}

.articles li p
{
	margin-top: 0;
}

@media only screen and (min-width: 700px)
{
	ul.articles
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (min-width: 920px)
{
	header p
	{
		max-width: calc(66% - 1em);
	}
	ul.articles
	{
		grid-template-columns: repeat(3, 1fr);
	}
}