/* --------------- Posts List --------------- */
ul.postsList {
	display: grid;
	grid-gap: 40px;
	grid-template-columns: repeat(3, minmax(0px, 1fr));
	list-style: none;
	padding-left: 0px;
}
ul.postsList li.postCard {
	margin-bottom: 0px;
}
ul.postsList figure {
	height: 240px;
	margin-bottom: 20px;
	position: relative;
	width: 100%;
}
ul.postsList img {
	height: 100%;
}

/* --------------- Post Card --------------- */
*.postCard figure {
	box-sizing: border-box;
	position: relative;
}
*.postCard figure.noImage {
	background-color: #FFFFFF;
	border: var(--border);
}
*.postCard figure.noImage svg {
	height: 50%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
}
*.postCard figure.dataGraph {
	background-color: #FFFFFF;
	border: var(--border);
	padding: 20px;
}
*.postCard figure a {
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
}
*.postCard figure.dataGraph img {
	object-fit: contain;
	object-position: center;
}
*.postCard img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}
*.postCard div.byLine {
	display: flex;
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 20px;
}
*.postCard div.byLine > * {
	display: block;
}
*.postCard div.byLine > a {
	border-right: #000000 solid 1px;
	color: #000000;
	font-weight: bold;
	margin-right: 10px;
	padding-right: 10px;
	transition: color 0.2s;
}
*.postCard div.byLine > a:hover {
	color: var(--logoBlue);
}
*.postCard p {
	margin-bottom: 0px;
}

/* --------------- TABLETS --------------- */

@media all and (max-width: 1359px) {
/* --------------- Posts List --------------- */
ul.postsList {
	grid-template-columns: repeat(2, minmax(0px, 1fr));
}
}

/* --------------- SMARTPHONES --------------- */

@media all and (max-width: 759px) {
/* --------------- Blog Roll --------------- */
ul.postsList {
	display: block;
}
ul.postsList li.postCard {
	border-bottom: var(--border);
	margin-bottom: 40px;
	padding-bottom: 20px;
}
}