@charset "utf-8";

.wrap-grandi {
    margin:10px 0;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 10px;
}
.wrap-grandi:after {display:block;visibility:hidden;clear:both;content:""}

.bx-grandi{
    color: #fff;
    position: relative;
    float: left;
    overflow: hidden;
    width: 229px;
    margin: 3px;
    height: 162px;
    background: #000;
    color: #fff;
    text-align: left;
}
.bx-grandi *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .6s ease;transition:all .6s ease}
.bx-grandi img{
    width: 229px;
    height: 162px;
    opacity: 0.9;
    vertical-align: top;
    -webkit-transition: opacity .35s;
    transition: opacity .35s;
}
.bx-grandi figcaption{position:absolute;bottom:0;left:0;width:100%;height:100%}
.bx-grandi figcaption>div{height:100%;overflow:hidden;width:100%;position:relative}
.bx-grandi h2,.bx-grandi h3{margin:0;position:absolute;left:0;padding:0 30px;font-size:16px;}
.bx-grandi h2{font-weight:900;top:0}
.bx-grandi h3{font-size:1em;bottom:10px;font-weight:500}
.bx-grandi h3:nth-of-type(2){opacity:0;-webkit-transform:translateY(150%);transform:translateY(150%)}
.bx-grandi a{left:0;right:0;top:0;bottom:0;position:absolute}
.bx-grandi:hover img,.bx-grandi.hover img{opacity:.3;-webkit-filter:grayscale(100%);filter:grayscale(100%)}
.bx-grandi:hover figcaption h3:first-of-type,.bx-grandi.hover figcaption h3:first-of-type{-webkit-transform:translateY(150%);transform:translateY(150%);opacity:0}
.bx-grandi:hover figcaption h3:nth-of-type(2),.bx-grandi.hover figcaption h3:nth-of-type(2){opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}