#listing-agenda {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(auto, min(50vw,40rem));
    grid-auto-flow: dense;
    gap: 0 ;
}

#listing-agenda .skelcard, #listing-agenda .card__lien {
    display: grid;
    flex: 1;
}

#listing-agenda .skelcard > *, #listing-agenda .card__lien > * {
    grid-row: 1;
    grid-column: 1;
}

#listing-agenda .skelcard__image,
#listing-agenda .card__image {
    height: 100%;
}

#listing-agenda .skelcard__infos,
#listing-agenda .card__infos {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

#listing-agenda .skelcard__text.categorie {
    background:#CCC;
    width: 10rem;
    height: 3.4rem;
    border-radius: 4rem;
}

#listing-agenda .skelcard__text.date {
    background:#CCC;
    width: 100%;
    height: 3rem;
}

#listing-agenda .skelcard__text.titre {
    background:#CCC;
    width: 100%;
    height: 6rem;
    margin-top: auto;
}

#listing-agenda .card__text.titre {
    margin-top: auto;
}

#listing-agenda .card__image img {
    height: 100%;
    object-fit: cover;
}

#listing-agenda  .card__flip {
    flex: 1;
    overflow: hidden;
}

  
#listing-agenda .card__flip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#filtres {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0 0 3rem 0;
}

.skelcard__titre, .skelcard__categorie, .skelcard__prix {
    margin: 1rem 0 0;
    max-width: 12rem;
    height: 3rem;
    background: linear-gradient(45deg, #ccc, #f1f1f1, #ccc);
    background-size: 200% 100%;
	color: var(--e-global-color-primary );
    animation: gradientAnimation 6s linear infinite;
}

.skelcard__titre {
    margin-top: 2rem;
    max-width: inherit;
}

.skeleton_filtre {
    display: inline-block;
	width: 15rem;
	height: 2.8rem;
	border-radius: 3px;
	background: linear-gradient(90deg, #ccc, #f1f1f1, #ccc);
    background-size: 200% 100%;
    animation: gradientAnimation 6s linear infinite;	
}

.skelcard, .card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* min-height: 63.6rem; */
    border-radius: 0;
    background-color: #fff;
	overflow: hidden;
}

.skelcard__image {
    background: linear-gradient(45deg, #ccc, #f1f1f1, #ccc);
	background-size: 200% 200%;
    animation: gradientAnimation2 6s linear infinite;
    overflow: hidden;
}

@keyframes gradientAnimation {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@keyframes gradientAnimation2 {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}