.article {
	margin-bottom: 40px;
}

.article figure {
	font-size: 0;
}

.article figure img {
	aspect-ratio: 600 / 400;
    object-fit: cover;
    width: 100%;
}

.article .date {
	font-size: 12px;
    letter-spacing: .1em;
    font-weight: 700;
    color: #929292;
    margin-top: 25px;
    margin-bottom: 10px;
}

.article h2 {
	letter-spacing: 2px;
    color: #080808;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
}

.article .resume {
	color: #929292;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 20px;
}

.article .lien {
	position: relative;
    color: #323232;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-size: 12px;
    padding-right: 25px;
}

.article .lien i {
	position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: right 0.3s ease;
}

.article .lien:hover i {
	right: 0;
}

.article ul {
	list-style-type: disc;
	margin-left: 40px;
}

.article p, .article li {
	color: #929292;
	font-weight: 300;
	line-height: 25px;
}

.article p, .article ul {
	margin-bottom: 10px;
}

.article .boutons {
	margin-top: 50px;
    display: flex;
    justify-content: center;
}

@media (min-width: 768px){
	.flex_articles {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.article {
		flex-basis: calc(50% - 30px);
		margin: 0 15px 40px;
	}
}

@media (min-width: 1200px){
	.article {
		flex-basis: calc(33.3333% - 30px);
	}
}