/* START hero */
.hero {
    min-height: 80vh;
    height: auto;
    display: flex;
    align-items: flex-end;
}

.hero .uniformSpacing {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

@media screen and (max-width: 600px) {
    .hero .uniformSpacing .mainLink{
        flex-direction: column;
    }
}

/* END hero */
/* START biColor */
.biColor .uniformSpacing {
    position: relative;
    z-index: 2;
    display: flex;
}

.biColor .uniformSpacing .containerLeft,
.biColor .uniformSpacing .containerRight {
    width: calc(100% / 2);
}

.biColor .uniformSpacing .containerLeft .iconeText {
    display: flex;
    gap: 1em;
}

.biColor .uniformSpacing .containerLeft .iconeText div {
    padding: .5em;
    border: 6px solid var(--basicColor3);
    border-radius: 100%;
    width: 4.5em;
    height: 4.5em;
    min-width: 4.5em;
    min-height: 4.5em;
}

.biColor .uniformSpacing .containerLeft .iconeText div span {
    display: flex;
}

.biColor .uniformSpacing .containerLeft .iconeText div span svg {
    width: 100%;
    height: 100%;
}

.biColor .uniformSpacing .containerRight {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.biColor .uniformSpacing .containerRight .containerCards {
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
}

.biColor .uniformSpacing .containerRight .containerCards .element {
    width: calc((100% - 3em * 2) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
    border: 1px solid #707070;
    border-radius: var(--smallRadius);
    padding: 1.5em;
}

.biColor .uniformSpacing .containerRight .containerCards .element span {
    display: flex;
}

.biColor .uniformSpacing .containerRight .containerCards .element span svg {
    height: 3em;
    width: auto;
}

@media screen and (max-width: 1500px) {
    .biColor .uniformSpacing .containerRight .containerCards{
        gap: 1em;
    }
    .biColor .uniformSpacing .containerRight .containerCards .element{
        width: calc((100% - 1em ) / 2) ;
    }
}

@media screen and (max-width: 1000px) {
    .biColor .uniformSpacing{
        flex-direction: column;
    }

    .biColor .uniformSpacing .containerLeft, .biColor .uniformSpacing .containerRight{
        width: 100%;
    }

    .biColor .uniformSpacing .containerRight .containerCards .element{
        width: calc((100% - 1em * 2) / 3) ;
    }

}

@media screen and (max-width: 600px) {
    .biColor .uniformSpacing .containerRight .containerCards .element{
        width: calc((100% - 1em ) / 2) ;
    }
}

@media screen and (max-width: 450px) {
    .biColor .uniformSpacing .containerRight .containerCards .element{
        width: 100% ;
    }
}




/* END biColor */
/* START listingCardsBg */
.listingCardsBg .uniformSpacing {
    display: flex;
    gap: 3em;
}


.listingCardsBg .uniformSpacing .introText {
    width: 35%;
}

.listingCardsBg .uniformSpacing .containerImgLink {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    width: 65%;
}

.listingCardsBg .uniformSpacing .containerImgLink .element {
    width: calc((100% - 2em * 2) / 3);
    height: auto;
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--smallRadius);
    padding: 1.5em;
}

.listingCardsBg .uniformSpacing .containerImgLink .element.afterFilter:after {
    opacity: 1;
    background: transparent linear-gradient(180deg, #241A0D00 0%, #241A0D33 50%, #241A0DBA 84%, #241A0DCC 100%) 0% 0% no-repeat padding-box;
    border-radius: var(--smallRadius);

}

@media screen and (max-width: 1500px) {
    .listingCardsBg .uniformSpacing{
        flex-direction: column;
    }

    .listingCardsBg .uniformSpacing .containerImgLink,{
        gap: 1em;
        width: 100%;
    }

    .listingCardsBg .uniformSpacing .introText{
        width: 100%;
    }

    .listingCardsBg .uniformSpacing .containerImgLink .element{
        calc((100% - 1em * 2) / 3)
    }
}

@media screen and (max-width: 950px) {
    .listingCardsBg .uniformSpacing{
        flex-direction: column;
    }

    .listingCardsBg .uniformSpacing .containerImgLink{
        gap: 1em;
        width: 100%;
    }

    .listingCardsBg .uniformSpacing .containerImgLink .element{
        width: calc((100% - 1em) / 2);
    }
}

@media screen and (max-width: 950px) {
    .listingCardsBg .uniformSpacing .containerImgLink .element{
        width: 100%;
    }
}


/* END listingCardsBg */

/* START listingColoredCards */
.listingColoredCards .uniformSpacing{
    display: flex;
    flex-wrap: wrap;
}

.listingColoredCards .uniformSpacing .card{
    width: calc(100% / 3);
    height: auto;
    padding: 2.5em;
}

.listingColoredCards .uniformSpacing .card .listing{
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.listingColoredCards .uniformSpacing .card .listing .element{
    display: flex;
    gap: 1em;
}

.listingColoredCards .uniformSpacing .card .listing .element .text{
    display: flex;
    flex-direction: column;
    gap: .25em;
}

.listingColoredCards .uniformSpacing .card .listing.listingIcone .element .icone,
.listingColoredCards .uniformSpacing .card .listing.listingNumber .element .icone{
    width: 3.5em;
    height: 3.5em;
    min-height: 3.5em;
    min-width: 3.5em;
    padding: .75em;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.listingColoredCards .uniformSpacing .card .listing.listingNumber .element .icone p{
    height: stretch;
}


.listingColoredCards .uniformSpacing .card .listing.listingIcone .element .icone span,
.listingColoredCards .uniformSpacing .card .listing.listingNumber .element .icone span,
.listingColoredCards .uniformSpacing .card .listing.listingCheckListe .element .icone span {
    display: flex;
    width: 100%;
    height: 100%;
}

.listingColoredCards .uniformSpacing .card .listing.listingIcone .element .icone span svg,
.listingColoredCards .uniformSpacing .card .listing.listingNumber .element .icone span svg,
.listingColoredCards .uniformSpacing .card .listing.listingCheckListe .element .icone span svg{
    width: 100%;
    height: 100%;
}

.listingColoredCards .uniformSpacing .card .listing.listingNumber .element .icone{
    border: 2px solid var(--basicWhite);
}

.listingColoredCards .uniformSpacing .card .listing.listingCheckListe {
    gap: .5em;
}


.listingColoredCards .uniformSpacing .card .listing.listingCheckListe .element .icone{
    width: 1.5em;
    height: 1.5em;
    min-height: 1.5em;
    min-width: 1.5em;
    background-color: initial;

}

.listingColoredCards .uniformSpacing .card .listing.listingCheckListe .element .icone svg path{
    fill: var(--basicColor3);
}

.listingColoredCards .uniformSpacing .card .listing.listingCheckListe .element .text p:first-child{
    display: none;
}

.listingColoredCards .uniformSpacing .card .listing.listingCheckListe .element .text * {
    color: var(--basicColor2);
}

.listingColoredCards .uniformSpacing .card .introText > img{
    width: 100%;
    height: auto;
    aspect-ratio: 21/9;
    object-fit: cover;
}

.listingColoredCards .uniformSpacing .card .introText .gallery{
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
}

.listingColoredCards .uniformSpacing .card .introText .gallery img{
    width: calc((100% - .75em * 2) / 3);
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

@media screen and (max-width: 1500px) {
    .listingColoredCards .uniformSpacing .card{
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 900px) {
    .listingColoredCards .uniformSpacing .card{
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    .listingColoredCards .uniformSpacing .card .listing:not(.listingCheckListe ) .element{
        flex-direction: column;
        align-items: center;
    }

    .listingColoredCards .uniformSpacing .card .listing:not(.listingCheckListe ) .element *{
        text-align: center;
    }

    .listingColoredCards .uniformSpacing .card .mainLink{
        justify-content: center;
    }

    .listingColoredCards .uniformSpacing .card .introText .gallery img{
        width: calc((100% - .75em) / 2);
    }

}



/* END listingColoredCards */