/* Mode LISTE */
.thumbnail {
	overflow: visible;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	box-sizing: border-box;
	position: relative;
	top: 0;
	background-color: transparent;
	transition: transform 0.2s, filter 0.18s;
}
  
.thumbnail p {
	flex: 1;
}
  
/* Mode LISTE - Bordure et arrondi sur .thumb */
.thumbnail .thumb {
	background-size: cover;
	background-position: center center;
	transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
	filter: brightness(100%);
	padding: 0% 0% 50% 0%;
	margin-bottom: 20px;
}

.thumbnail .thumb::after {
	position: absolute;
	top: 0;
	content: "¶";
	height: 100%;
	width: 100%;
	font-size: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: var(--thumbnail-hover-effect, 0.2s linear);
	color: var(--portfolios-text-main-color, var(--modules-white));
}
  
.thumbnail:hover .thumb::after {
	bottom: 0px;
	opacity: 1;
	box-shadow: var(--thumbnail-hover-effect, none);
}

.thumbnails {
	margin-bottom: 40px;
}
  
.thumbnail .article-blog-infos {
	flex:1;
	display: flex;
	flex-direction: column;
	transition: 0.2s linear;
	color: var(--portfolios-text-main-color, #222);
}
/* Ensure div/h4 inside list thumbnails follow portfolio text color */
.thumbnail h4, .thumbnail div {
	color: var(--portfolios-text-main-color, #222);
} 

.thumbnail:hover .article-blog-infos {
	opacity: 0.7;
}
  
.thumbnail h5 {
	font-weight: bold;
	color: var(--portfolios-text-main-color, #222);
}