.article_box{
	width: 600px;
	/*height:600px;*/
	margin:2em 1em;
    overflow-y: hidden;
	transition: box-shadow 0.3s, border 0.3s;
	border-radius: var(--border_radius);
	position: relative;
	background-color:#FFFFFFe0;
	filter: drop-shadow(4px 2px 6px #00000080);
}

body.dark-theme .article_box{


}


.article_box:hover{
	/*box-shadow: 0px 5px 20px var(--surface_2);*/
}

.article_box img{
	width: 100%;
	height: auto;
	/* max-height: 400px; */
	object-fit: contain;
}

.article_box .title{
	font-size: 1.6em;
    text-align: center;
    padding: 0.5em;
    width: 100%;
    text-align: center;
    z-index: 9;
}

.article_box .description{
	padding:0.5em;
    padding-left: 1.5rem;
    height: 8rem;
}

.article_box .article_dates{
	position: absolute;
	right:1.5rem;
	bottom:1rem;
	font-size: 0.8em;
}

.article_box .title, .description p, .article_box .article_dates{
	color: var(--text);
}

.article_box .article_read_btn{
	position: absolute;
	left:1.5rem;
	bottom:1rem;
	padding:0.5em;
	font-size: 1.2em;
}

.article_box .article_read_btn:hover{
/*	cursor: pointer;
	background: var(--buttons_background);
	color:var(--buttons_text);
*/
}

.image_container{
	text-align: center;
}

.trois_petits_points{
	color:var(--buttons_background);
}

@media only screen and (max-width: 600px) 
{
	.article_box .article_dates{
		position: relative;
		font-size: 0.8em;
		width: 100%;
		margin-bottom: 1em;
		text-align: right;
	}

	.article_box{
		margin:2rem 0;
		width: 100%;
		height: auto;
	}

	.article_box .title{
		font-size: 1.5em;
		text-align: center;
		margin:0.5em 0;
	}

	.article_box img {
	    width: 100%;
	    height: auto;
	}

	.article_box .article_read_btn{
		position: relative;
	}
}