@charset "utf-8";

#news {
	background: linear-gradient(#fff, #f0f0f0);
}

/*----------------------------------------------------------------------> ▼ .news <--*/

#news .news {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.news a {
	display: block;
	border-radius: var(--border_radius_light);
	overflow: hidden;
}

.news .summary {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.news .date {
	font-family: Helvetica-R;
	font-size: 18px;
	letter-spacing: 1px;
	color: #aaa;
}

.news .category {
	padding: 2px 7.5px 0;
	font-size: 15px;
	color: #fff;
	border-radius: var(--border_radius);
	background: #26a;
}

.news .category_trouble {
	background: #c00;
}

.news .title {
	padding-top: ;
}

@media (1024px <= width) {
	.news a {
		width: calc((100% - 30px) / 3);
		box-shadow: 0 0 3px #eee;
	}

	.news a:nth-child(n + 2):not(:nth-child(3n + 1)) {
		margin-left: 15px;	
	}

	.news a > div:nth-child(2) {
		padding: 0px 20px 15px;
		background: #fff;
	}
	
	.news .thumbnail {
		aspect-ratio: 4 / 2;
		border-radius: var(--border_radius_light) var(--border_radius_light) 0 0;
	}
	
	.news .summary {
		padding: 15px 0 5px;
	}
	
	.news .title {
		padding: ;
	}
}

@media (width <= 1023px) {	
	.news a {
		width: 100%;
		padding: 15px 0 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	
	.news a:nth-child(n + 2) {
		margin-top: 15px;
		border-top: 1px dashed #ccc;
	}

	.news .thumbnail {
		display: none;
	}
	
	.news .summary {
		justify-content: flex-start;
		padding-bottom: 2px;
	}

	.news .date {
		width: ;
		margin-right: 10px;
	}

	.news .category {
		background: none;
		color: var(--theme);
	}
}