header{border-bottom:1px solid #ccc;margin-bottom:1vw}

a.home{position:absolute;width:40px;height:40px;top:0;left:0;border:1px solid #999;justify-content:center;align-items: center}
i{color:#666}

ul{position:relative;display:flex;flex-wrap:wrap;list-style:none;width:100%;justify-content:center}
ul.selected{border-bottom:1px solid #ccc;padding-bottom:1vw;margin-bottom:1vw}
ul.selected li{width:10vw;height:10vw}
ul.selected h3{font-size:1.6vw}
ul.selected p{font-size:1vw}

li{position:relative;width:22vw;height:22vw;margin:2px;cursor:pointer}
li div{width:100%;height:100%;background-size: cover;background-repeat: no-repeat;transition:all 0.3s}
li p{position:absolute;top:0;padding:0.4vw;opacity:0}

li:hover div{opacity:0.3}
li:hover h3{color:#111}
li:hover p{opacity:1}

h3{position:absolute;bottom:0;color:#eee;font-size:2.4vw;text-shadow:0 0 24px rgba(0,0,0,0.8);padding:0.6vw}


@media screen and (max-width:540px){
  header{height:18vw;padding:2vw;margin-top:3vw;margin-bottom:2vw;}
  header a{width:18vw;height:18vw}
  a.home{width:10vw;height:10vw;}
  ul.selected li{width:16vw;height:16vw}
}