#nav-second{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0);clip-path:inset(100%);white-space:nowrap}
.data_group{display:flex;justify-content:center;flex-wrap:wrap;align-content:flex-start}
link+nav h2{margin: 1em auto 0;
    font-size: 1.4em;
    padding: 0 10px;
    text-align: center;
    color: #df232b;
    max-width: 900px;
    width: 100%;}
link+nav p,link+nav p+p{max-width:1000px;
    width: 100%;
margin: 10px auto 1em;
    padding: 0 10px;
    text-indent: 0;
    text-align: left;
}
.data_group li,.data_group li a{display:block;width:300px;height:300px}
.data_group li{margin:.5em;border-radius:1em;border:1px solid rgba(0,0,0,.15);background:linear-gradient(to top left,#df232b 25px,transparent 12%);background-repeat:no-repeat;transition:1s;overflow:hidden}
.data_group li a{border:none}
.data_group li a picture,.data_group li a picture img{display:block;width:300px;height:200px}
.data_group li a h4{width:300px;height:100px;margin:0;padding:15px;text-align:center;font-size:1.2rem;background-color:rgba(230,231,232,.5);display:flex;justify-content:center;align-items:center}
.data_group li:hover{transform:translateY(-2px);box-shadow:0 5px 10px rgba(0,0,0,.4);transition:.2s;border:1px solid rgba(0,0,0,.1)}
.data_group li:active{transform:translateY(2px);box-shadow:0 5px 10px rgba(0,0,0,.1);transition:.2s;border:1px solid rgba(0,0,0,.1)} 

h4+div{position:absolute;width:300px;height:100px;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:#fff;margin-top:0;text-indent:0;display:grid;justify-content:center;align-content:center;text-align:center;padding:5px 15px;box-sizing:border-box;opacity:0;transition:opacity 0.5s ease;font-size:1rem}
li:hover h4+div{opacity:1}