@charset 'utf-8';

.wr-gallery { margin: -10px;}
.wr-gallery li { padding: 10px;}
.wr-gallery li a { display: block; position: relative; z-index: 2; color: #111;}
.wr-gallery li a .img-wrap { position: relative;}
.wr-gallery li a .img-wrap:before,
.wr-gallery li a .img-wrap:after { opacity:0; content:''; display: block; position: absolute; z-index: 2; transition: 0.3s; }
.wr-gallery li a .img-wrap:before { left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);  }
.wr-gallery li a .img-wrap:after { content:'OVER VIEW'; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 130px; height: 35px; text-align: center; font-size: 14px; font-weight: 500; color: #fff; text-align: center; line-height: 35px; border-radius: 18px; background: #555; }
.wr-gallery li a .subject { position: relative; margin: 2rem 0 0; font-size: 1.8rem; line-height: 1; font-weight: 500;}
.wr-gallery li a .date {font-size: 1.6rem; color: #999;  }

.wr-gallery li a:hover .img-wrap:before  { opacity: 1;}
.wr-gallery li a:hover .img-wrap:after  { opacity: 1;  top: 50%;}

@media(max-width:768px){
    .wr-gallery { margin: -5px;}
    .wr-gallery li { padding: 5px;}
}
@media(max-width:440px){
    .wr-gallery { gap:3rem; flex-direction: column; margin: -0;}
    .wr-gallery li { padding: 0; max-width: 100%;}
}