/* CSS Document */

.articleList{
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		padding-bottom: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
		border-bottom: 1px solid #ccc;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 16px;
		}
	}
	& h3{
		font-weight: 700;
		font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.05em;
	}
	& h4{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& h3+div{
		display: contents;
	}
	& dl{
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 1em;
		align-content: start;
		align-items: start;
		margin-top: 8px;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
	}
	& dt{
		min-width: 6em;
		padding: 0.25em 0.5em;
		border: 1px solid #b2b6bc;
		border-radius: 4px;
		text-align: center;
	}
	& dd{
		margin-top: 0.25em;
	}
	& time{
		font-weight: 700;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 0 1em;
		border-radius: 16px;
		border: 2px solid currentColor;
		font-weight: 700;
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
		letter-spacing: 0.05em;
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
		&[data-fav-id]{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			grid-column: 1;
			grid-row: 1;
			align-self: start;
			justify-self: end;
			position: relative;
			aspect-ratio: 1;
			width: 32px;
			margin: 8px;
			border-radius: 16px;
			background: #fff;
			color: var(--variable-color);
			font-size: 0;
			z-index: 1;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M26.12,12.81h-7.46l-2.3-7.2c-.11-.35-.6-.35-.72,0l-2.3,7.2h-7.46c-.36,0-.51.46-.22.68l6.04,4.46-2.31,7.21c-.11.35.29.63.58.42l6.03-4.45,6.03,4.45c.29.22.69-.07.58-.42l-2.31-7.21,6.04-4.46c.29-.22.14-.68-.22-.68Z"/></svg>') no-repeat center / contain;
			}
			&.favOn{
				background: var(--variable-color);
				color: #fff;
			}
		}
	}
	& figure{
		display: grid;
		grid-row-gap: 8px;
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 16px;
		}
		& figcaption{
			font-size: 12px;
		}
	}
	@media (max-width: 575.98px) {
		& section{
			&:not(:has(img)):before,
			& figure{
				grid-column: 1;
				grid-row: 1;
			}
		}
		& ul{
			grid-row: 2;
		}
	}
	@media (min-width: 576px) {
		border-top: 1px solid #ccc;
		& section{
			grid-template-columns: clamp(200px, calc(344 / 1400 * 100dvw), 344px) 1fr;
			grid-template-rows: auto auto auto 1fr;
			column-gap: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
			padding-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
			&:not(:has(img)):before,
			& figure{
				grid-column: 1;
				grid-row: 1 / 6;
				align-self: start;
			}
			a[data-fav-id]{
				grid-column: 1;
				grid-row: 1 / 6;
			}
		}
		& ul{
			grid-row: 1;
		}
	}
}