.archive-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;

	.archive-item {
		flex-basis: 380px;
		min-height: 225px;
		background-image: linear-gradient(
			-20deg, 
			hsl(0, 16%, 97%), 
			hsl(0 50% 99%), 
			hsl(0, 76%, 97%)
		); 
		background-size: cover;
		padding: 1em;
		box-sizing: border-box;
		background-blend-mode: overlay;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;

		&._has-featured-image {
			background-color: hsl(0 0% 90%);
		}
	}

	.archive-item-date {
		position: absolute;
		top: 0;
		right: 0;
		padding-inline: 1em .5em;
		font-size: .8em;
		background-color: hsla(0, 23%, 80%, 0.2);
		color: hsl( 0 5% 52% );
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0.7em 100%);
	}

	._has-featured-image .archive-item-date {
		background-color:  hsl(0 0% 0% / .5 );
		text-shadow: 0 0 2px hsl(0 0% 0% / .7);
		color: white;
	}

	.archive-post-title {
		font-weight: 500;

		a {
			color: inherit;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.archive-post-excerpt ,
	.archive-post-title
	{
		color: black;
		text-shadow: 0 0 2px white;
	}

	.archive-post-excerpt {
		font-weight: 300;
	}

	.archive-post-permalink {
		display: flex;
		flex-direction: row-reverse;
		align-self: flex-end;

		a {
			background: var(--colorLink);
			color: white;
			padding: .3em .5em;
			border-radius: 2px;
			text-decoration: none;
			font-size: .9em;

			&:hover {
				box-shadow: inset 0 0 50px hsl( 0 0% 0% / .4 );
			}
		}
	}
}

h4.monthly-archives-title {
	font-size: 1.2em;
	font-family: var(--fontSansSerif), sans-serif;
	font-weight: 600;
}

ul.monthly-archives {
	background: hsl( 0 0% 96% );
	margin: 1em 0;

	li li {
		list-style-type: disc;
		margin-left: .2em;

		&::marker {
			content: '— ';
			color: hsl(0 0% 84%);
		}
	}

	li.expander:not(.collapsed) > a {
		font-weight: bold;
		color: inherit;
	}

	& > li {
		padding: .5em;

		& > a {
			text-decoration: none;
		}

		&:not(:last-of-type) {
			border-bottom: 1px solid hsl(0 0% 80%);
		}
	}

	a._currently-displayed {
		text-decoration: none;
		color: inherit;
		pointer-events: none;
		font-weight: bold;
	}
}