figure.gallery-group position: relative float: left overflow: hidden margin: .3rem .2rem width: calc(50% - .4rem) height: 250px border-radius: 8px background: $dark-black -webkit-transform: translate3d(0, 0, 0) &:hover img opacity: .4 transform: translate3d(0, 0, 0) .gallery-group-name::after transform: translate3d(0, 0, 0) p opacity: 1 transform: translate3d(0, 0, 0) img position: relative margin: 0 !important max-width: none width: calc(100% + 20px) height: 250px backface-visibility: hidden opacity: .8 transition: opacity .35s, transform .35s transform: translate3d(-10px, 0, 0) object-fit: cover figcaption position: absolute top: 0 left: 0 padding: 1.5rem width: 100% height: 100% color: $gallery-color text-transform: uppercase backface-visibility: hidden & > a position: absolute top: 0 right: 0 bottom: 0 left: 0 z-index: 1000 opacity: 0 p display: -webkit-box overflow: hidden margin: 0 padding: .4rem 0 0 letter-spacing: 1px font-size: .8rem line-height: 1.5 opacity: 0 transition: opacity .35s, transform .35s transform: translate3d(100%, 0, 0) -webkit-line-clamp: 4 -webkit-box-orient: vertical .gallery-group-name position: relative display: -webkit-box overflow: hidden margin: 0 padding: .4rem 0 font-weight: bold font-size: 1.2rem line-height: 1.5 -webkit-line-clamp: 2 -webkit-box-orient: vertical &:after position: absolute bottom: 0 left: 0 width: 100% height: 2px background: $gallery-color content: '' transition: transform .35s transform: translate3d(-100%, 0, 0) .gallery-group-main overflow: auto padding: 0 0 .8rem .justified-gallery margin: 0 0 .8rem img opacity: 0 .img-alt display: none .fancybox width: auto text-align: inherit @media screen and (max-width: 600px) figure.gallery-group width: calc(100% - .4rem)