/* START hero */
.hero {
    height: 50vh;
    min-height: fit-content;
}

.hero .uniformSpacing {
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    gap: 2.5em;
    height: fit-content;
}

.hero .categoriesList{
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 1em;
}

.hero .categoriesList a{
    display: flex;
    align-items: flex-end;
    border: 1px solid var(--basicWhite);
    height: fit-content;
    padding: .5em 1.25em;
    background-color: initial;
    transition: ease all .3s;
}

.hero .categoriesList a.active,
.hero .categoriesList a:hover{
    background-color: var(--basicWhite);
    color: var(--basicBlack);
}

/* END hero */



/* START actualite */
.actualite .uniformSpacing{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.actualite .uniformSpacing .listingContainer{
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
}

.actualite .uniformSpacing .listingContainer a{
    width: calc((100% - 1.5em * 2) / 3);
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.actualite .uniformSpacing .listingContainer a .imgContainer img{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.actualite .uniformSpacing .listingContainer a .imgContainer p{
    position: absolute;
    bottom: 3em;
    left: 0;
    padding: .25em 1em;
    border-radius: 0 var(--basicRadius) var(--basicRadius) 0;
    width: fit-content;
}

@media screen and (max-width: 900px) {
    .actualite .uniformSpacing .listingContainer a{
        width: calc((100% - 1.5em) / 2);
    }
}

@media screen and (max-width: 600px) {
    .actualite .uniformSpacing .listingContainer a{
        width: 100%;
    }
}

/* END actualite */