.articleNavList {
	/*gap: var(--layout-space-100);*/
	gap: 0;
}

@media (width <= 600px) {
	.articleNavList {
		margin-inline: calc(-1 * var(--page-paddingInline));
		width: 100vw;
	}
}
.articleItem {
	gap: var(--layout-space-100);
	position: relative;
}

.articleItem-main {
	display: grid;
	grid-template-rows: subgrid;
	grid-template-columns: 1fr auto;
	gap: var(--layout-space-100) 0px;
}

.articleItem-date {
	color: var(--color-main-400);
}

.articleItem-title {
	color: var(--color-1-100);
	line-height: 1;
	font-size: var(--font-size-200);
}

.articleItem-category {
	display: grid;
	grid-template-rows: subgrid;
	grid-column: 2;
	grid-row: 1 / span 2;
	align-items: end;
	justify-items: end;
	font-weight: 600;
}

.articleItem-link  {
	position: absolute;
	inset: 0;
}

.articleItem:has(.articleItem-link) {
	&:where(:hover, :focus, :focus-within) {
		&::after {
			content: "";
			position: absolute;
			display: block;
			inset: calc(-1 * var(--layout-space-25));
			background-color: var(--color-softHighlight-100);
			z-index: -1;
		}
	}
}

@media (width <= 600px) {
	.articleItem {
		width: 80vw;
		flex-shrink: 0;
	}

	.articleItem-main {
		display: flex;
		flex-direction: column;
	}

	.articleItem-category {
		display: flex;
		align-items: flex-start;
		gap: var(--layout-space-100);
	}
}