.twt-jg[data-layout="grid"] {
display:flex;
flex-wrap:wrap;
margin:20px -10px 0;
justify-content:center;
}
.twt-jg[data-layout="grid"] > a,
.twt-jg[data-layout="grid"] > div {
display:block;
flex:0 0 100%;
max-width:100%;
padding:0 10px 20px;
text-decoration:none;
}
@media (min-width:700px) {
.twt-jg[data-layout="grid"] > a,
.twt-jg[data-layout="grid"] > div {
flex:0 0 50%;
max-width:50%;
}
}
@media (min-width:1024px) {
.twt-jg[data-layout="grid"] > a,
.twt-jg[data-layout="grid"] > div {
flex:0 0 33.33%;
max-width:33.33%;
}
}
.twt-jg[data-layout="grid"] figure {
position:relative;
padding-bottom:66.66%;
overflow:hidden;
}
.twt-jg[data-layout="grid"] img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1);
transition:transform .3s;
}
.twt-jg a:hover img,
.twt-jg a:focus img {
transform:scale(1.05);
}
.twt-jg[data-layout="grid"] figcaption {
position:absolute;
display:block;
left:0;
bottom:0;
width:100%;
padding:40px 10px 10px;
max-height:100%;
overflow-y:auto;
background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7) 40px);
text-shadow:0 0 1px #000;
color:#fff;
}