/*
--------------------------------------
Items
--------------------------------------
*/

/*Style uniquement appliqué si swiper est inactif parce que grid n'est pas compatible avec swiper*/
.posts-items__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
	max-width: 100%;
}

/*
--------------------------------------
Item
--------------------------------------
*/

.post-item {
	position : relative;
	display: flex;
	flex-direction: column;
	font-family: var(--e-global-typography-primary-font-family);
	background: #fff;
	border-radius: 5px 5px 0 0;
	height: 100%;
}

/*image*/

.post-item__image {
	position: relative;
	overflow: hidden;
	border-radius: 5px 5px 0 0;
	width: 100%;
	height: 0;
	padding-bottom: 52%; /*régler le pourcentage pour une image moins haute au besoin*/
}

.post-item__image img {
	position: absolute;
	border-radius: 5px 5px 0 0;
	transform  : scale(1);
	transition : all 0.75s ease-in-out;
}

.posts-items__grid-news .post-item__image img {
	top: 0;
	left: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.post-item:hover img {
	transform : scale(1.025);
}

/*content*/

.post-item__content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	/*height: 100%;*/
	padding: 2em 1em;
}

/*name*/

.post-items .post-item__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--e-global-color-primary);
	letter-spacing: -1px;
	line-height: 150%;
	padding-left: 12px;
}

/*excerpt*/

.post-items .post-item__excerpt {
	font-family: var(--e-global-typography-text-font-family);
	font-size: 14px;
	font-weight: 400;
	color: #8D8D8D;
	line-height: 150%;
	opacity: 0.8;
	padding: 1em 0;
	padding-left: 12px;
}

/*btn*/

.post-item__btn {
	display: flex;
	align-items: center;
}

/*
--------------------------------------
Swiper
--------------------------------------
*/

.post-items.swiper .swiper-slide {
	height: auto;
}

.post-items.swiper .swiper-wrapper {
	padding-bottom: 4em;
}

.post-items.swiper .swiper-scrollbar {
	background: #fff;
}

.post-items.swiper .swiper-scrollbar-drag {
	background: var(--e-global-color-secondary);
}