.row {
    max-width: 618px;
    margin: 0 auto;
}

.demo-gallery {
    width: 100%;
    height: auto;
    float: left;
}

.demo-gallery a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.demo-gallery a img {
    width: 100%;
    height: 100%;
    border: 0;
}

.demo-gallery figure {
    display: none;
}

.demo-gallery__title {
    line-height: 14px;
    font-size: 14px;
    opacity: 0.8;
    margin-top: 5px;
    width: 100%;
    float: left;
}

.grid-container {
    display: grid;
    width: 1000px;
    height: 440px;
    margin-left: auto;
    margin-right: auto;
    margin-top: calc((100vh - 120px - 480px) / 2);
    margin-bottom: 25px;
    grid-gap: 20px 20px;
    grid-template-columns: repeat(4, 235px);
    grid-template-rows: repeat(3, 132px);
    grid-template-areas:
        "Pic1 Pic2 Pic3 Pic4"
        "Pic5 Pic6 Pic7 Pic8"
        "Pic9 Pic10 Pic11 Pic12";
}

.Pic1 {
    grid-area: Pic1;
}

.Pic2 {
    grid-area: Pic2;
}

.Pic3 {
    grid-area: Pic3;
}

.Pic4 {
    grid-area: Pic4;
}

.Pic5 {
    grid-area: Pic5;
}

.Pic6 {
    grid-area: Pic6;
}

.Pic7 {
    grid-area: Pic7;
}

.Pic8 {
    grid-area: Pic8;
}

.Pic9 {
    grid-area: Pic9;
}

.Pic10 {
    grid-area: Pic10;
}

.Pic11 {
    grid-area: Pic11;
}

.Pic12 {
    grid-area: Pic12;
}

/* .grid-container * {border: 1px solid red;}*/
@media (max-width: 1000px) {
    .grid-container {
        width: 765px;
        height: 590px;
        margin: 0pc auto 30px auto;
        grid-gap: 20px 20px;
        grid-template-columns: repeat(3, 235px);
        grid-template-rows: repeat(4, 132px);
        grid-template-areas:
            "Pic1 Pic2 Pic3"
            "Pic4 Pic5 Pic6"
            "Pic7 Pic8 Pic9"
            "Pic10 Pic11 Pic12";
    }
}

@media (max-width: 765px) {
    .grid-container {
        width: 480px;
        height: 900px;
        margin: 0pc auto 30px auto;
        grid-gap: 20px 10px;
        grid-template-columns: repeat(2, 235px);
        grid-template-rows: repeat(6, 132px);
        grid-template-areas:
            "Pic1 Pic2"
            "Pic3 Pic4"
            "Pic5 Pic6"
            "Pic7 Pic8"
            "Pic9 Pic10"
            "Pic11 Pic12";
    }
}

@media (max-width: 480px) {
    .grid-container {
        width: 235px;
        height: 1810px;
        margin: 0pc auto 30px auto;
        grid-gap: 20px 0px;
        grid-template-columns: repeat(1, 235px);
        grid-template-rows: repeat(12, 132px);
        grid-template-areas:
            "Pic1"
            "Pic2"
            "Pic3"
            "Pic4"
            "Pic5"
            "Pic6"
            "Pic7"
            "Pic8"
            "Pic9"
            "Pic10"
            "Pic11"
            "Pic12";
    }
}