@charset 'utf-8';

.wr-gallery { display: flex; gap:2rem}
.wr-gallery li { flex:inherit; padding: 0; width: calc((100% - 6rem) / 4); }
.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: #fbb61b; }
.wr-gallery li a .subject { position: relative; margin: 1rem 0 0; font-size: 1.4rem; line-height: 1; transition: 0.1s; }
.wr-gallery li a .date {font-size: 1.6rem; color: #999;  }

@media(max-width:576px){
    .wr-gallery {flex-wrap:wrap;}
    .wr-gallery li { padding: 0; width: calc((100% - 2rem) / 2); }
    .wr-gallery li a .subject { font-size: 1.5rem;}
}