h1{color:rgb(237,237,105);margin-top:10vh;font-family:lombok;font-size:4rem;-webkit-mask-image:linear-gradient(180deg,black 30%,transparent);mask-image:linear-gradient(180deg,black 30%,transparent)}.portafolio{max-width:100vw;min-height:100vw;display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.7);padding:5%;min-height:100vh}.portafolio nav{position:relative;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}.portafolio>nav>div.tarjeta-post{position:relative;width:auto;max-width:1fr}.portafolio>nav>div.tarjeta-post>img.tarjeta-image{position:relative;width:100%}.portafolio>nav>div.tarjeta-post>div.tarjeta-texto{position:absolute;top:0;height:100%;background-color:rgba(255,255,255,0);width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;filter:blur(0)}.portafolio>nav>div.tarjeta-post>div.tarjeta-texto>h2{color:var(--primary-color);opacity:0}.portafolio>nav>div.tarjeta-post>div.tarjeta-texto>a{color:black;padding:25px;background-color:var(--primary-color);text-decoration:none;opacity:0}@keyframes animation-hover-tarjeta{0%{filter:blur(0)}to{filter:blur(10px)}}.portafolio>nav>.tarjeta-post:hover img,.portafolio>nav>div.tarjeta-post>div.tarjeta-texto{animation-name:animation-hover-tarjeta;animation-duration:3s}.portafolio>nav>.tarjeta-post:hover img{animation-fill-mode:forwards}@keyframes animation-title{0%{opacity:0}to{opacity:.8}}.portafolio>nav>.tarjeta-post:hover .tarjeta-texto>a,.portafolio>nav>.tarjeta-post:hover .tarjeta-texto>h2{display:block;animation-name:animation-title;animation-duration:3s;animation-fill-mode:forwards}@media(max-width:1200px){h1{color:rgb(237,237,105);margin-top:10vh;font-family:lombok;font-size:2rem;-webkit-mask-image:linear-gradient(180deg,black 30%,transparent);mask-image:linear-gradient(180deg,black 30%,transparent)}.portafolio nav{position:relative;width:100%;display:grid;grid-template-columns:1fr 1fr}}@media(max-width:765px){h1{color:rgb(237,237,105);margin-top:10vh;font-family:lombok;font-size:1.4rem;-webkit-mask-image:linear-gradient(180deg,black 30%,transparent);mask-image:linear-gradient(180deg,black 30%,transparent)}.portafolio nav{position:relative;width:100%;display:grid;grid-template-columns:1fr}}