/**/

.list {
	list-style: none;
	padding: 0;
	margin: 0 -20px;
}

.list li {
	border-bottom: 1px solid #cdcdcd;
	padding: 20px;
}

.list li:last-child {
	border-bottom: 0;
}

.list article .pic {
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	background-color: #ddd;
}

@media(min-width: 768px) {
	.list article .pic {
		float: right;
		width: 300px;
		margin-left: 10px;
	}
}

.list article .pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.list article a {
	display: block;
	text-decoration: none;
	color: #333;
	font-size: 0.9em;
}

.list article h2 {
	margin: 0;
}

.list article a:hover h2,
.list article a:focus h2 {
	text-decoration: underline;
}

.list article p {
	margin: 0;
	font-size: 1.1em;
}

/**/

.pager {
	margin-top: 20px;
}


.pager a {
	display: inline-block;
	border: 1px solid #ddd;
	padding: 10px;
}

.pager a:hover {
	background: #f1f1f1;
}

.pager a:focus {
	background: #f1f1f1;
}