/*CSS GRID MAPING GALLERY*/
.ver-gridimg-container {
    grid-template-areas:
     ". . b"
     "a a b"
     "a a b"
     "a a b"
     "a a b"
     "a a b"
     "c d e"
     "c d e"
     "c d e"
     "c d e"
     "c d g"
     "f f g"
     "f f g"
     "f f g"
     "f f g"
     "f f g"
     "h i i"
     "h i i"
     "h i i"
     "h i i"
     "h j k"
     "l j k"
     "l j k"
     "l j k"
     "l j k"
     "l j k"
     "m m n"
     "m m n"
     "m m n"
     "m m n"
     "m m n";
}

.ver-gridimg-container .ver-gridimg-item {
    transition: all .5s cubic-bezier(0.65, 0, 0.35, 1);
}

/*CSS ITEM MAPING GALLERY*/
.ver-gridimg-container .ver-gridimg-item:nth-child(1) {
    grid-area: a;
    max-height: 315px;
    min-height: 315px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(2) {
    grid-area: b;
    min-height: 380px;
    max-height: 380px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(3) {
    grid-area: c;
    min-height: 380px;
    max-height: 380px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(4) {
    grid-area: d;
    min-height: 380px;
    max-height: 380px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(5) {
    grid-area: e;
    max-height: 315px;
    min-height: 315px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(6) {
    grid-area: f;
    max-height: 315px;
    min-height: 315px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(7) {
    grid-area: g;
    min-height: 380px;
    max-height: 380px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(8) {
    grid-area: h;
    min-height: 380px;
    max-height: 380px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(9) {
    grid-area: i;
    max-height: 315px;
    min-height: 315px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(10) {
    grid-area: j;
    min-height: 0px;
    max-height:0px;
}

.ver-gridimg-container.active .ver-gridimg-item:nth-child(10) {
    min-height: 380px;
    max-height:380px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(11) {
    grid-area: k;
    min-height: 0px;
    max-height: 0px;
}

.ver-gridimg-container.active .ver-gridimg-item:nth-child(11) {
    min-height: 380px;
    max-height: 380px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(12) {
    grid-area: l;
    max-height: 0px;
    min-height: 0px;
}

.ver-gridimg-container.active .ver-gridimg-item:nth-child(12) {
    max-height: 315px;
    min-height: 315px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(13) {
    grid-area: m;
    max-height: 0px;
    min-height: 0px;
}

.ver-gridimg-container.active .ver-gridimg-item:nth-child(13) {
    max-height: 315px;
    min-height: 315px;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(14) {
    grid-area: n;
    max-height: 0px;
    min-height: 0px;
}

.ver-gridimg-container.active .ver-gridimg-item:nth-child(14) {
    min-height: 380px;
    max-height: 380px;
}

.ver-gridimg-container .ver-gridimg-item picture,
.ver-gridimg-container .ver-gridimg-item img{
  width: 100%;
  height: 100%;
}

.btn-gallery {
    margin-top: -120px;
    transition: all .5s cubic-bezier(0.65, 0, 0.35, 1);
}

.btn-gallery.active {
    margin-top: 2rem;
}

@media only screen and (max-width: 1024px) {
.ver-gridimg-container .ver-gridimg-item:nth-child(10),
.ver-gridimg-container .ver-gridimg-item:nth-child(11),
.ver-gridimg-container .ver-gridimg-item:nth-child(12),
.ver-gridimg-container .ver-gridimg-item:nth-child(13),
.ver-gridimg-container .ver-gridimg-item:nth-child(14){
    min-height: 0px;
    max-height:0px;
}
    
.ver-gridimg-container .ver-gridimg-item:nth-child(1),
.ver-gridimg-container .ver-gridimg-item:nth-child(5),
.ver-gridimg-container .ver-gridimg-item:nth-child(6),
.ver-gridimg-container .ver-gridimg-item:nth-child(9),
.ver-gridimg-container.active .ver-gridimg-item:nth-child(12),
.ver-gridimg-container.active .ver-gridimg-item:nth-child(13){
    max-height: 35vw;
    min-height: 35vw;
}

.ver-gridimg-container .ver-gridimg-item:nth-child(2),
.ver-gridimg-container .ver-gridimg-item:nth-child(3),
.ver-gridimg-container .ver-gridimg-item:nth-child(4),
.ver-gridimg-container .ver-gridimg-item:nth-child(7),
.ver-gridimg-container .ver-gridimg-item:nth-child(8),
.ver-gridimg-container.active .ver-gridimg-item:nth-child(10),
.ver-gridimg-container.active .ver-gridimg-item:nth-child(11),
.ver-gridimg-container.active .ver-gridimg-item:nth-child(14){
    min-height: 40vw;
    max-height: 40vw;
}  
}

@media only screen and (max-width: 767px) {
.ver-gridimg-container {
    grid-template-areas:
     "a b"
     "a b"
     "a b"
     "c d"
     "c d"
     "c d"
     "f e"
     "f e"
     "f e"
     "h g"
     "h g"
     "h g"
     "j i"
     "j i"
     "j i"
     "l k"
     "l k"
     "l k"
     "n m"
     "n m"
     "n m";
}   
.ver-gridimg-container .ver-gridimg-item {
    max-height: 50vw !important;
    min-height: 50vw !important;
}
}