#hero-description {
    white-space: pre-line;
}

.with-vertical-line-top::after {
    content: "";

    position: absolute;
    top: 0; /* Position at the top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center alignment */

    width: 2px;
    height: 8%;

    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.moments__content {
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    width: 100%;
    height: 100%;
    padding-inline: 10%;
    
    padding: 20px;
    box-sizing: border-box;
}

.moments__content p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.moments__content.chess {
    background-color: #63412c;
}

.moments__content.diploma {
    background-color: #35445a;
}

.moments__content.andorra {
    background-color: #410908;
}

.moments__bg-img {
    position: absolute;
    inset: 0;
    
    width: 100%;
    height: 100%;
    
    object-fit: cover;
}

.moments__blur-bg-img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    
    object-fit: cover;
    filter: brightness(50%);
}

p.moments__date {
    margin: 0;
    padding: 0;

    font-size: 18px;
    line-height: 28px;
    font-family: 'basis_grotesque_proregular', sans-serif;
    
    text-transform: uppercase;

    @media only screen and (max-width: 479px) {
        font-size: 12px;
        line-height: 14px;
    }
}

h3.moments__title {
    @media only screen and (max-width: 479px) {
        font-size: 18px;
        line-height: 22px;
    }
}

p.moments__description {
    max-width: 70%;
    
    margin: 0;
    padding: 0;

    font-size: 16px;
    line-height: 26px;
    font-family: 'basis_grotesque_proregular', sans-serif;

    @media only screen and (max-width: 479px) {
        max-width: 86%;
        
        font-size: 14px;
        line-height: 18px;
    }
}

img.moments__img__myself-phone {
    filter: brightness(90%);
}

div.moments__chess__gradient-overlay {
    position: absolute;
    inset: 0;

    /* it focuses on myself and put others in shadow to help with recognition. */
    background: linear-gradient(90deg, rgba(23,23,23,0.71) 0%, rgba(23,23,23,0.48) 60%, rgba(23,23,23,0) 80%, rgba(23,23,23,0.24) 90%, rgba(23,23,23,0.69) 100%);
}

div.moments__diploma__gradient-overlay {
    position: absolute;
    inset: 0;
    
    /* it focuses on myself and put others in shadow to help with recognition. */
    background: linear-gradient(90deg, rgba(23,23,23,0.71) 0%, rgba(23,23,23,0.48) 45%, rgba(23,23,23,0) 54%, rgba(23,23,23,0.24) 65%, rgba(23,23,23,0.69) 100%);
}

.clients__item__container {
    padding: 32px;
    aspect-ratio: 1;
}

.clients__item__anchor {
    display: flex;
    justify-content: center;
    align-items: center; 
    
    width: 100%;
    height: 100%;
}

.clients__item__img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: grayscale(100%);
}

#ecocea-logo {
    width: 100px;
    height: 100px;
}

#perfectstay-logo {
    width: 140px;
    height: 140px;
}

#ipsosenso-logo {
    width: 70px;
    height: 70px;
}

#upply-logo {
    width: 100px;
    height: 100px;
    filter: grayscale(100%) brightness(200%);
}

#pango-logo {
    width: 80px;
    height: 80px;
    filter: grayscale(100%) contrast(0%) brightness(200%);
}

#nobo-logo {
    width: 70px;
    height: 70px;
    filter: grayscale(100%) brightness(200%);
}

#moona-logo {
    width: 60px;
    height: 60px;
    filter: grayscale(100%) contrast(0%) brightness(200%);
}