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

.verticalImgText .smallUniformSpacing img{
    object-fit: cover;
    margin: 0 auto;
    width: 90%;
    height: auto;
    aspect-ratio: 21/9;
    border-radius: var(--basicRadius);
}


.verticalImgText .smallUniformSpacing .containerText{
    display: flex;
    flex-direction: column;
    gap: .5em;
}
/* END verticalImgText */

/* START  listingCards */
.listingCards .uniformSpacing{
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.listingCards .containerCards{
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.listingCards .containerCards .element{
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: calc((100% - 2em * 2 ) / 3);
}

.listingCards .containerCards .element div{
    display: flex;
    flex-direction: column;
    gap: .75em;
}

.listingCards .containerCards .element img{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: var(--basicRadius);
    object-fit: cover;
}
@media screen and (max-width: 750px) {
    .listingCards .containerCards .element{
        width: 100%;
    }
}
/* END  listingCards */

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

.listeImg .containerImg{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    align-items: center;
}

.listeImg .containerImg img{
    width: calc((100% - 2em * 5) / 6);
    height: auto;
}

@media screen and (max-width: 600px) {
    .listeImg .containerImg img{
        width: calc((100% - 2em * 2) /3)
    }
}
/* END listeImg */

/* START bandeauImg */

.bandeauImg  > img {
    position: absolute;
    bottom: 0;
    right: 4em;
    height: 70%;
    width: auto;
}

.bandeauImg .introText {
    padding: 2em 0;
    width: 70%;
}

.bandeauImg .smallUniformSpacing{
    z-index: 60;
}


@media screen and (max-width: 800px) {
    .bandeauImg  > img {
        height: 50%;
    }
}

@media screen and (max-width: 650px) {
    .bandeauImg  > img {
        display: none;
    }

    .bandeauImg .introText{
        width: 100%;
    }
}
/* END bandeauImg */


/* START bigImgText */
.bigImgText .uniformSpacing{
    display: flex;
    align-items: center;
    gap: 8em;
}

.bigImgText .uniformSpacing > img,
.bigImgText .uniformSpacing > .editor-img{
    width: 50%;
    height: -webkit-fill-available;
    object-fit: cover;
}

.bigImgText .uniformSpacing > .editor-img img{
    width: 100%
}

.bigImgText .uniformSpacing .introText{
    width: 50%;
    padding: 3em 0;
}

.bigImgText .uniformSpacing .introText img{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--basicRadius);
}

@media screen and (max-width: 700px) {
    .bigImgText .uniformSpacing{
        flex-direction: column;
        gap: 2em;
    }

    .bigImgText .uniformSpacing > img,
    .bigImgText .uniformSpacing > .editor-img{
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        padding-top: 3em;
    }

    .bigImgText .uniformSpacing .introText{
        width: 100%;
        padding-top: 0;
    }

}

/* END bigImgText */