/**
 * Styles Masonry pour le Query Loop
 */

.grid {display:block;}
.grid-item { 
    width:100%;
    position:relative;}
.grid-item > figure {z-index:3;margin:0;}
.grid-item > figure:hover {opacity:0;}
.grid-item > div { 
    z-index:2; position: absolute;
    top:0;left:0;right:0;bottom:0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 10%;
}
.grid-item > div h4 {text-transform:uppercase;}
.grid-item > div > div a {text-decoration:none;font-style:italic;}

.gutter-sizer {width:0;position: absolute;visibility: hidden;}

@media screen and (min-width:768px) {
    .grid-item {width:48%;}
    .gutter-sizer {width:2%;}
}
@media screen and (min-width:1200px) {
    .grid-item {width:23.5%;}
}