/*---------------------Showcases--------------------------*/
/*Logo---*/
#ifp .logo img {
    margin: auto;
    margin-top: 20%;
    margin-bottom: 20%;
    width: 20%;
}

/*Colors---*/
.SC_Colors {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--distanceBaseline));
    position: relative;
}

.SC_Colors div {
    position: relative;
}

.SC_Colors div span {
    position: absolute;
    bottom:0;
    color: white;
    padding: calc(var(--distanceBaseline));
    font-size: var(--fontSizeStaticMini);
}

.SC_Colors.base {
    width: 100%;
}

.SC_Colors.base div {
    flex: 1 1 auto;
    aspect-ratio: 4 / 3;
    min-width: 75px;
    max-width: 25%;
    display:flex;
    flex-direction: column;
}

.SC_Colors.base div.base{
    flex: 1 1 auto;
    aspect-ratio: auto;
    max-width: 100%;
    gap:var(--distanceBaseline);
}

.SC_Colors.base .base .main{
    aspect-ratio: 4 / 3;
    max-width:100%;
}

.SC_Colors.base .base .variant{
    aspect-ratio: 3 / 1;
    max-width:100%;
}

.SC_Colors.support {
    /* width: calc(75% - calc(var(--distanceBaseline)/2)); */
}

.SC_Colors.support div {
    flex: 1 1 auto;
    aspect-ratio: 4 / 1.5;
}

/*Typography---------*/
.SC_Typography {
}

.SC_Text {
    width:100%;
    font-size: var(--fontSizeVariableMega);
    line-height: var(--lineHeightSuperTight);
} 

/*ifp Showcase----*/
#ifp .SC_Typography p {
    font-family: freight-big-pro, serif;
    font-weight: 300;
    font-style: normal;
}

#ifp p.sub {
    font-family: freight-sans-pro, sans-serif;
    font-weight: 500;
}

#ifp p.sub.small {
    padding-top: 0;
    padding-left: calc(var(--distanceBaseline)/6);
}

#ifp p.sub.big {
    font-weight: 400;
}

/*e2n Showcase----*/

#e2n .SC_Typography p {
    font-family: "soleil", sans-serif;
    font-style: normal;
    font-weight:800;
    color: #000e46;
    letter-spacing:-0.5rem;
}

/*Shapes---------*/

.SC_Shapes {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    margin: var(--distanceBaseline);
    gap: var(--distanceBaseline);
}

.SC_Shapes img {
    flex: 1 1 auto;
    object-fit: contain;
    max-height: 100px;

}





/*---------------------------MOBIL---------------------------*/
@media only screen and (max-width:600px) {
    /*Colors*/
    .SC_Colors {
        position: relative;
    }

    .SC_Colors div span {
        padding: 5px;
        font-size: 8pt;
    }

    .SC_Colors.base div {
        min-width: 40%;
        max-width: 50%;
    }

    .SC_Colors.support {
        width: 100%;
    }

    .SC_Colors.support div {
        flex: 1 1 auto;
        aspect-ratio: 4 / 3;
    }

}