.article-list {
	margin-left:auto;
	margin-right: auto;

	max-width: 75ch;
}

.title-date-widget {
	display: inline-flex;
	flex-direction: row;
	justify-content: space-between;
	width: calc(100% - 2rem);
	align-items: center;
}

.title-date-widget > h3 {
	margin-left: 2rem;
	display: inline-block;
	width: fit-content;
	flex-shrink: 0;
	flex-grow: 1;
	flex-basis: 50%;
}

.article-date {
	flex-shrink: 0;
	flex-grow: 1;
	flex-basis: 50%;
	container-type: inline-size;
	container-name: article-date;
}

.article-date > .full, .article-date > .compact, .article-date > .minimal {
	display: none;
}

@container article-date (width >= 38em) {
	.full {
		display: inline-block !important;
	}
}

@container article-date (19em < width < 38em) {
	.compact {
		display: inline-block !important;
	}
}

@container article-date (width <= 19em) {
	.minimal {
		display: inline-block !important;
	}
}

.article-details {
	border-style: double;
	border-width: 3px;
	border-color: var(--visited);
	
	margin-top: 25px;

	padding-left: 25px;
	padding-right: 25px;
}

.article-details > summary >:nth-child(2) {
	margin-top: 0;
}

.article-details:not(:open) > summary > hr {
	display: none;
}

@media (max-width: 999px) {
	.article-list {
		max-width: unset;
		margin: unset;
	}

	.article-details {
		border-style: none;
	}

	.article-details:not(:last-of-type) {
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}
}

/* Style when checkbox is checked */
#toggle-open-all-details:checked ~ ::details-content {
  content-visibility: visible;
}

.article-details > p {
	/* Idea for the multi column, mostly useless for now */
	break-inside: avoid;
}