@charset 'utf-8';

.wr-gallery { margin: -1rem}
.wr-gallery li { padding: 1rem;}
.wr-gallery li a { display: block; position: relative; z-index: 2; color: #111;}
.wr-gallery li a .img-wrap { position: relative; background: #f5f5f5; border: 1px solid #e1e1e1;}
.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: 140px; height: 38px; text-align: center; font-size: 14px; font-weight: 500; color: #fff; text-align: center; line-height: 38px; border-radius: 19px; background: rgba(148, 51, 47, 0.75); }
.wr-gallery li a .subject { position: relative; padding: 0 0 0 20px; margin: 20px 0 10px; line-height: 1; transition: 0.1s; }
.wr-gallery li a .subject:before { content:''; display: block; position: absolute; left: 0; top: 0; width: 4px; height: 100%;   background: rgba(148, 51, 47, 1); transition: 0.1s; }
.wr-gallery li a:hover .img-wrap:before  { opacity: 1;}
.wr-gallery li a:hover .img-wrap:after  { opacity: 1;  top: 50%;}

.wr-gallery li a:hover .subject:before { width: 8px; }

@media(min-width:769px){
    .wr-gallery li a:hover .subject{ padding: 0 0 0 24px }
}


@media(max-width:768px){
    .wr-gallery li a .subject  { padding: 0 0 0 15px; margin: 15px 0 5px; font-size: 15px;}
}

@media(max-width:480px){    
    .wr-gallery li a .subject  { padding: 0 }
    .wr-gallery li a .subject:before { width: 0;}
}