.gridGallery {
    display                 : grid;
    /*grid-template-rows    : repeat(1, 18vw);*/
    // grid-auto-rows: 12.2vw;
    grid-gap: 1.5rem 1.5rem;

    // grid-auto-flow       : dense;
    &.grid-col-12 {
        grid-template-columns: repeat(12, auto);
    }

    &.grid-col-3 {
        grid-template-columns: repeat(3, auto);
    }

    &.grid-col-4 {
        grid-template-columns: repeat(4, auto);
    }

    .cols-1 {
        grid-column: span 1;
    }

    .cols-2 {
        grid-column: span 2;
    }

    .cols-3 {
        grid-column: span 3;
    }

    .cols-4 {
        grid-column: span 4;
    }

    .cols-5 {
        grid-column: span 5;
    }

    .cols-6 {
        grid-column: span 6;
    }

    .rows-1 {
        grid-row: span 1;
    }

    .rows-2 {
        grid-row: span 2;
    }

    .rows-3 {
        grid-row: span 3;
    }

    .rows-4 {
        grid-row: span 4;
    }

    .rows-5 {
        grid-row: span 5;
    }

    .rows-6 {
        grid-row: span 6;
    }

    &.thumbList {
        display  : flex;
        flex-wrap: wrap;

        .box {
            flex: 1;
            min-width: 31%;
            max-height: 240px;
        }
    }
}

.gallery-section {
    padding: 30px 0;
}

.gallery-box {
    background: #fff;

    // padding   : 15px;
    &.type-2 {
        .box {
            & > div{
                height: 100%;
                & > img{
                    min-height: 100%;
                }
            }
            .desc {
                .box-head {
                    width          : 100%;
                    display        : flex;
                    align-items    : center;
                    justify-content: flex-end;

                    .icon-download {
                        font-size: 28px;
                        color    : #ffffff;
                    }

                    .addButton {
                        display       : flex;
                        align-items   : center;
                        flex-direction: column;
                        margin: 0 13px;

                        span {
                            font-family     : 'GilroyExtrabold';
                            font-size       : 1.077rem;
                            color           : rgba(255, 255, 255, 0.65);
                            display         : flex;
                            align-items     : center;
                            width           : 52px;
                            height          : 24px;
                            background-color: rgba(255, 255, 255, 0.29);
                            border-radius   : 4px;
                            justify-content : center;
                            margin-top      : 5px;
                        }
                    }
                }

                .cb-checkbox {
                    position    : relative;
                    top         : 0;
                    left        : 0;
                    right       : 0;
                    padding-left: 0;
                    margin      : 0;
                }
                .cb-checkbox{
                    &.favorites{
                        .checkmark{
                            &:after{
                                font-size: 35px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                    }
                }

                .box-footer {
                    flex-direction: column;
                    align-items   : flex-start;
                    width         : 100%;
                    height: auto;
                    .loc-adress {
                        padding: 3px 0;

                        span {
                            color: #ffffff;
                        }
                    }

                    &>span {
                        border-left: none;
                    }
                }
            }
        }
    }

    .box {
        display   : inline-block;
        max-width : 100%;
        overflow  : hidden;
        box-shadow: 0px 8px 24px 1px #00000020;
        transition: all .5s ease;
        position  : relative;
        min-height: 230px;
        a{
            display: block;
            height: 100%;
            width: 100%;
            img{
                min-height: 100%;
            }
        }

        &:hover {
            box-shadow: 0px 8px 24px 1px #00000040;

            img {
                transform: scale(1.2);
            }

            .desc {
                z-index   : 9;
                opacity   : 1;
                visibility: visible;
                overflow  : visible;
                text-align: left;
            }
        }

        &.big {
            grid-row   : span 2;
            grid-column: span 2;
        }

        &.horizontal {
            grid-column: span 2;
        }

        &.vertical {
            grid-row: span 2;
        }

        img {
            object-fit: cover;
            width     : 100%;
            height    : 100%;
            transition: all .5s ease;
            min-height: 240px;
        }

        .desc {
            position       : absolute;
            top            : 0;
            width          : 100%;
            height         : 100%;
            z-index        : -1;
            display        : flex;
            flex-direction : column;
            justify-content: space-between;
            transition     : all .3s linear;
            opacity        : 0;
            visibility     : hidden;
            overflow       : hidden;
            background     : rgb(0, 0, 0);
            background     : linear-gradient(0deg, rgba(0, 0, 0, 0.53) 0, rgba(0, 0, 0, 0.3) 100%);
            padding        : 17px;
            text-align     : left;

            .box-head {
                width: calc(100% - 40px);

                span {
                    display    : block;
                    font-family: 'GilroyExtrabold';
                    font-size  : 1.077rem;
                    color      : rgba(255, 255, 255, 0.65);
                    display    : flex;
                    align-items: center;

                    &.text {
                        margin-top: 5px;
                    }

                    &.title {
                        font-size: 1.166rem;
                        color    : #ffffff;
                    }
                }
            }

            .box-footer {
                display    : flex;
                align-items: center;
                width      : calc(100% - 30px);

                .loc-adress {
                    display    : flex;
                    align-items: center;
                    width      : calc(100% - 30px);
                    flex-wrap  : wrap;
                }

                span {
                    display    : block;
                    font-family: 'GilroyExtrabold';
                    font-size  : 1.077rem;
                    color      : rgba(255, 255, 255, 0.65);
                    border-left: 2px solid rgba(255, 255, 255, 0.65);
                    padding    : 0 2px;

                    &:first-child {
                        border-left: none;
                    }
                }

                .icon-map-pin {
                    font-size: 16px;
                    color    : rgba(255, 255, 255, 0.65);
                }
            }

            .cb-checkbox {
                position: absolute;
                top     : 20px;
                right   : 20px;
                height  : auto;
            }

            .zoom {
                position : absolute;
                bottom   : 15px;
                right    : 20px;
                font-size: 24px;
                color    : #ffffff;
            }
        }
    }
}

/**** MEDIA QUERIES ****/
@media screen and (max-width: 900px) {
    // .gridGallery{
    //     grid-auto-rows: 17.2vw;
    // }
}

@media screen and (max-width: 767px) {
    .gridGallery {
        display        : flex;
        flex-wrap      : wrap;
        justify-content: center;

        &.thumbList {
            .box {
                flex     : 0 0 48%;
                max-width: 48%;
                min-width: 48%;
            }
        }
    }

    .gallery-box {
        .box {
            flex      : 1;
            min-width : 46%;
            max-width : 46%;
            max-height: 200px;

            .desc {
                opacity   : 1;
                visibility: visible;
                overflow  : visible;
            }
        }
    }
}

@media screen and (max-width: 480px) {
    .gridGallery {
        display: block;

        &.thumbList {
            display: block;

            .box {
                max-width: 100%;
            }
        }
    }

    .gallery-box {
        .box {
            max-width: initial;
            width    : 100%;
            margin   : 5px auto;
        }
    }
}