.main__proyectos{
    display: flex;
    flex-direction: column;
    background: #141414;
}


.main__proyectos h3{
    margin-top: 1em;
    margin-bottom: 1em;
    order: -1;
}



.proyectos__flex{
    border-top: 12px solid #101010;
    border-bottom: 12px solid #101010;
    height: 33.33vh;
    width: 100%;
    position: relative;
    order: 2;
}

.flex__item--banner{
    height: 100%;
    width: 100%;
}


.flex__item--banner img{
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.flex__item--tipografia{
    bottom: 0;
    position: absolute;
    color: WHITE;
    
}

/* CLIPS */


.wrapper {
    text-align: center;
    OPACITY: 0.99;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.motion{
    background-image: url("../img/calavera.png");
}
.diseño{
    background-image: url("../img/Mambo-visual-logo.png");
}
.fotografia{
    background-image: url("../img/nature/Untitled-1.png");
}

.clip-text {
    font-size: 5em;
    font-weight: bold;
    line-height: 1;
    position: relative;
    display: inline-block;
    margin: .25em;
    padding: .5em .75em;
    text-align: center;
    /* Color fallback */
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.clip-text:before,
.clip-text:after {
    position: absolute;
    content: '';
}

/* Background */
.clip-text:before {
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: inherit;
}

/* Text Background (black zone) */
.clip-text:after {
    position: absolute;
    z-index: -1;
    top: .125em;
    right: .125em;
    bottom: .125em;
    left: .125em;
    background-color: #000;
}

.clip-text_two::after {
    background-color: rgb(241 241 241 / 90%) ;
    border: 2px solid rgb(0, 0, 0);
}



.clip-text_one, .clip-text_two {
    background-position: 0% 0%;
    background-size: 300%;
    transition: all 2s ease-in-out;
}


.wrapper:hover .clip-text_one , .wrapper:hover .clip-text_two{
    background-position: 100% 100%;
    
}




/* RESPONSIVE */

@media (min-width :1024px ) and (max-width: 1340px){

 
}

@media (max-width: 1024px){
    .clip-text{
        font-size: 2.5em;
        margin: .1em;
        padding: .3em .45em;
        width: 90%;
        align-self: center;
    }

}