/* Grid Photo Gallery */
.gridPhotoGallery { margin-left:-5px; margin-right: -5px; }
.gridPhotoGallery__item { float: left; position: relative; padding: 0;}
.gridPhotoGallery__link {width: 100%; height: 0; display:block; padding: 0; padding-bottom:100%; margin-bottom: 0;}
.gridPhotoGallery__img { background-repeat: no-repeat; background-position: center; background-size:cover; display: block; position: absolute; top: 5px; right: 5px; left: 5px; bottom: 5px;}
/* Icons */
.gridPhotoGallery .gridPhotoGallery__item .kl-icon { opacity: 0; position: absolute; top: 50%; margin-top: 15px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; border-color: #fff; color: #fff }
.gridPhotoGallery .gridPhotoGallery__link:hover .kl-icon { display: block; opacity: 1; margin-top: 0; }
/* Title */
.gridPhotoGallery__link { position: relative; }
.gridPhotoGallery__link:after { content: attr(title); position: absolute; font-size: 16px; text-transform: uppercase; color: #fff; text-align: center; left: 15%; right: 15%; top: 50%; margin-top: -65px; opacity: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
.gridPhotoGallery__link:hover:after { opacity: 1; }
/* BG Overlay */
.gridPhotoGallery__img:after { content: ''; position: absolute; background-color: rgba(28, 31, 32, 0.25); top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.gridPhotoGallery__link:hover .gridPhotoGallery__img:after { opacity: 1; }
/* Cols Width */
.gridPhotoGallery--cols-1 .gridPhotoGallery__item {width:100%;}
.gridPhotoGallery--cols-2 .gridPhotoGallery__item {width:50%; }
.gridPhotoGallery--cols-3 .gridPhotoGallery__item {width:33.3333%;}
.gridPhotoGallery--cols-4 .gridPhotoGallery__item {width:25%;}
.gridPhotoGallery--cols-5 .gridPhotoGallery__item {width:20%;}
.gridPhotoGallery--cols-6 .gridPhotoGallery__item {width:16.6666%;}
/* 2 x width */
.gridPhotoGallery--cols-2 .gridPhotoGalleryItem--w2 {width:100%; }
.gridPhotoGallery--cols-3 .gridPhotoGalleryItem--w2 {width:66.6666%; }
.gridPhotoGallery--cols-4 .gridPhotoGalleryItem--w2 {width:50%; }
.gridPhotoGallery--cols-5 .gridPhotoGalleryItem--w2 {width:40%; }
.gridPhotoGallery--cols-6 .gridPhotoGalleryItem--w2 {width:33.3333%; }
/* height rations w1 + h1 & w2 + h2 */
.gridPhotoGallery--ratio-short .gridPhotoGalleryItem--w1 .gridPhotoGalleryItem--h1,
.gridPhotoGallery--ratio-short .gridPhotoGalleryItem--w2 .gridPhotoGalleryItem--h2 { padding-bottom: 75%; }
.gridPhotoGallery--ratio-square .gridPhotoGalleryItem--w1 .gridPhotoGalleryItem--h1,
.gridPhotoGallery--ratio-square  .gridPhotoGalleryItem--w2 .gridPhotoGalleryItem--h2 { padding-bottom: 100%; }
.gridPhotoGallery--ratio-tall .gridPhotoGalleryItem--w1 .gridPhotoGalleryItem--h1,
.gridPhotoGallery--ratio-tall .gridPhotoGalleryItem--w2 .gridPhotoGalleryItem--h2 { padding-bottom: 125%; }
/* height rations w2 + h1 */
.gridPhotoGallery--ratio-short .gridPhotoGalleryItem--w2 .gridPhotoGalleryItem--h1 { padding-bottom: 37.5%; }
.gridPhotoGallery--ratio-square .gridPhotoGalleryItem--w2 .gridPhotoGalleryItem--h1 { padding-bottom: 50%; }
.gridPhotoGallery--ratio-tall .gridPhotoGalleryItem--w2 .gridPhotoGalleryItem--h1 { padding-bottom: 62.5%; }
/* height rations w1 + h2 */
.gridPhotoGallery--ratio-short .gridPhotoGalleryItem--w1 .gridPhotoGalleryItem--h2 { padding-bottom: 150%; }
.gridPhotoGallery--ratio-square .gridPhotoGalleryItem--w1 .gridPhotoGalleryItem--h2 { padding-bottom: 200%; }
.gridPhotoGallery--ratio-tall .gridPhotoGalleryItem--w1 .gridPhotoGalleryItem--h2 { padding-bottom: 250%; }

@media (max-width: 992px) {
    .gridPhotoGalleryItem--w1,
    .gridPhotoGalleryItem--w2 { width: 50% !important; }
    .gridPhotoGalleryItem--h1,
    .gridPhotoGalleryItem--h2 { padding-bottom: 100% !important; }
}

@media (max-width: 480px) {
    .gridPhotoGalleryItem--w1,
    .gridPhotoGalleryItem--w2 { width: 100% !important; }
    .gridPhotoGallery__link:after { font-size: 13px }
}