.article-item {
	border-radius: var(--border-radius-md);
	text-decoration: none;
	& a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		column-gap: 10px;
		color: var(--font-color);
		padding: 8px 0;
		& sup {
			margin-left: 5px;
			font-size: 0.7em;
		}
		& h3 {
			font-size: var(--font-size-md);
			font-weight: normal;
			margin: 0;
		}
		& p {
			font-size: var(--font-size-xs);
			font-family: var(--font-family-monospace);
			color: var(--font-color-gray);
			text-transform: uppercase;
			text-align: right;
			white-space: nowrap;
			margin-bottom: 0;
		}
	}
}

@media screen and (max-width: 560px) {
	.article-item {
		margin-bottom: 10px;
		& a {
			flex-direction: column-reverse;
			align-items: flex-start;
			& p {
				margin-bottom: 5px;
			}
		}
	}
}