/* .more-info */
a .more-info { position: absolute; top: 0; left: 0; z-index: 10; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; letter-spacing: 2px; text-transform: uppercase; background: rgba(0, 0, 0, .75); opacity: 0; transition: opacity .3s ease;}
a .more-info:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #fff; transition: all .6s ease;}
a .more-info .ico { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 50px; height: 50px; border: 1px solid #fff; border-radius: 100%; margin-bottom: 1rem;}
a .more-info svg { width: 10px; height: 10px;}

@media (hover:hover){
    a:hover .more-info { opacity: 1;}
    a:hover .more-info:after { top: 5%; left: 5%; width: 90%; height: 90%;}
}