#ArticleTile{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 1.0rem;
	row-gap: 1.0rem;

	h3{
		font-size: var(--font-m);
	}
	div.tile{
		border: solid 1px #eee;
		padding: 1.0rem;
		box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1);
	}

	div.info{
		line-height: 1;
		display: flex;
		align-items: center;
		margin: 0.5rem 0;

		time{
			white-space: nowrap;
			flex: auto;
		}

		ul.tags{
			font-size: var(--font-xs);
			font-weight: bold;

			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			margin: 0;
			padding: 0;

			list-style-type: none;

			li{
				white-space: nowrap;
				background-color: rgba(0,0,0,0.1);
				margin: 0 0 0.2rem 0.2rem;
				border-radius: 0.2rem;
				padding: 0.3rem 0.4rem;
			}

			a{ color: #666; }
			a:hover{ color: brown; }
		}
	}
	div.img{
		margin: 0.5rem 0 0;
	}

	/* Pagenation */
	nav{
		ul{
			text-align: center;
			font-weight: bold;;
			list-style-type: none;

			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			margin: 0;
			padding: 0;
		}
		li{
			display: inline-block;
			margin: 0 0.2rem;
		}
		a:link{ color: #537219; }
		a:visited{ color: #537219; }
		a:hover{ color: brown; }
	}
}

/*	Responsive
------------------------------ */
/* pc */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	#ArticleTile{ grid-template-columns: 1fr 1fr 1fr; }
}
/* tablet */
@media screen and (min-width: 481px) and (max-width: 768px) {
	#ArticleTile{ grid-template-columns: 1fr 1fr; }
}
/* smart phone */
@media screen and (max-width: 480px) {
	#ArticleTile{ grid-template-columns: 1fr; }
}