/*Gallery*/
@import url("https://fonts.googleapis.com/css?family=Lato:300,400|PT+Sans:400,700");

.row-outer {
    padding: 20px 0;
}
.container {
    width: 95%;
    max-width: 1160px;
    margin: auto;
}


.grid-gallery {
    margin-top: 6%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 'item1 item1 item2 item3'
                         'item4 item4 item2 item5'
                         'item4 item4 item2 item6';
    grid-gap: 10px;
    height: 80vh;
}

.galleryItem {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 12rem;
    cursor: pointer;
    background: red;
}

.item1 {
    grid-area: item1;
    background:  url("../img/IMG_5339.JPG");
    background-position: center !important; 
}
.item2 {
    grid-area: item2;
    background:  url("../img/IMG_4571.png"); 
}
.item3 {
    grid-area: item3;
    background:  url("../img/IMG_5377.JPG"); 
}
.item4 {
    grid-area: item4;
    background:  url("../img/IMG_5354.JPG"); 
}
.item5 {
    grid-area: item5;
    background:  url("../img/IMG_4567.png");
}
.item6 {
    grid-area: item6;
    background:  url("../img/IMG_5337.JPG");
}


@media (max-width: 768px) {
    .grid-gallery { 
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "item1 item1 item2"
                             "item3 item4 item2"
                             "item5 item6 item2";
    }
    #gallery
    {
        margin-top: 15%;
    }
}

@media (max-width: 620px) {
    .grid-gallery { 
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "item1 item3"
                             "item2 item4"
                             "item2 item5" 
                             "item2 item6";
        margin-bottom:5%;
    }
}


@media (max-width: 360px) {
    /*.grid-gallery { 
        grid-template-columns: 1fr;
        grid-template-areas: "item1"
                             "item2"
                             "item3" 
                             "item4"
                             "item5"
                             "item6";
      margin-bottom: 60%;
    }*/
    .item2 {
        background-position: top;
    }
}

@media (max-width: 290px) {
  .grid-gallery { 
    margin-bottom: 100%;
  }
}



/*End Gallery*/