section.archives {
    padding-top: var(--big-margin);
    padding-bottom: 148px;

}

section.archives > ul {
    display: flex;
    flex-direction: column;
    gap: var(--med-margin);
}

.event {
  --color: var(--orange);
  position: relative;
  width: 100%;
  border-bottom-width: 0;
}


.event.evenement {
  --color: var(--orange);
}

.event.creason {
  --color: var(--red);
}

.event.formason {
  --color: var(--blue);
}

.event.les-seances-d-ecoute {
  --color: var(--yellow);
}

.event.atelier {
  --color: var(--green);
}

.event > figure {
    border-color: var(--color);
}

.event > figure > img {
    aspect-ratio: 16/10;
    object-fit: cover;
}

.event > h2 {
    font-size: var(--small-font-size)!important;
    padding: 14px var(--small-margin);
    margin-bottom: 0 !important;
    border-left: 1px solid var(--color);
    transition: background-color 0.2s ease, letter-spacing 0.5s ease;
}

.event:hover > h2 {
  background-color: var(--color);
  letter-spacing: 0.05em;
  padding-bottom: 26px;
}

@media screen and (min-width: 1024px) {
    section.archives {
        padding-left: var(--med-margin);
        padding-right: var(--med-margin);
    }
    section.archives > ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--med-margin);
    }

    /* .event > h2 {
        position: absolute;
        left: 12px;
        bottom: 12px;
        right: 12px;
    } */
}