.event-flex{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 15px;
	> *{
		margin: 0 !important;
	}
}


.event-grid {
	max-width: 700px;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1px 8fr minmax(0px, 4fr);
	grid-template-areas:
		"date barre desc btn"
	;
	align-items: center;
	grid-gap: 20px;

	padding: 30px;
	background-color: var(--violet-blanc);
	border: 2px solid var(--violet-trans);
	border-radius: 15px;

	.event-date{
		grid-area: date;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		span.heure{
			font-variation-settings: "slnt" 0, "wdth" 75, "wght" 300;
		}
		span.jour{
			font-variation-settings: "slnt" 0, "wdth" 75, "wght" 500;
			font-size: 2em;
			color: var(--violet);
		}
		span.mois{
			font-variation-settings: "slnt" 0, "wdth" 75, "wght" 600;
		}
	}
	.event-barre-rouge{
		grid-area: barre;

		background-color: var(--rouge);
		height: 75%;
	}
	.event-desc{
		grid-area: desc;
	}
	.event-desc h3{
		margin: 0;
	}
	.event-desc p{
		margin: 0;
		margin-top: 0.3em;
	}
	.event-btn-droite{
		grid-area: btn;

		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.btn{
		display: block;
		width: fit-content;
	}
}

@media screen and (max-width: 750px){
	.event-grid{
		grid-template-columns: 1fr 1px 8fr;
		row-gap: 10px;
		grid-template-areas:
			"date barre desc"
			"date barre btn"
		;
		.event-btn-droite{
			justify-content: flex-start;
			font-size: 1em;

		}
	}
}