.photo {
    height: 85vh;
    background-image: url(./images/photo_gallery_.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.photo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80vh;
    padding: 0 7%;
    width: 50%;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0 7%;
}

.gallery-1,
.gallery-2,
.gallery-3,
.gallery-4,
.gallery-5,
.gallery-6,
.gallery-7,
.gallery-8,
.gallery-9,
.gallery-10,
.gallery-11,
.gallery-12,
.gallery-13,
.gallery-14,
.gallery-15,.gallery-16,
.gallery-17 {
    height: 400px;
    width: 95%;
    margin-bottom: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 20px solid #eee;
    border-radius: 10px;
}

.gallery-1 {
    background-image: url(./images/g1.jpg);
}

.gallery-2 {
    background-image: url(./images/g2.jpg);
}

.gallery-3 {
    background-image: url(./images/g3.jpg);
}

.gallery-4 {
    background-image: url(./images/g4.jpg);
}

.gallery-5 {
    background-image: url(./images/g5.jpg);
}

.gallery-6 {
    background-image: url(./images/g6.jpg);
}

.gallery-7 {
    background-image: url(./images/g7.jpg);
}

.gallery-8 {
    background-image: url(./images/g8.jpg);
}

.gallery-9 {
    background-image: url(./images/g9.jpg);
}

.gallery-10 {
    background-image: url(./images/g10.jpg);
}

.gallery-11 {
    background-image: url(./images/g11.jpg);
}

.gallery-12 {
    background-image: url(./images/g12.jpg);
}

.gallery-13 {
    background-image: url(./images/g13.jpg);
}

.gallery-14 {
    background-image: url(./images/g14.jpg);
}

.gallery-15 {
    background-image: url(./images/g15.jpg);
}
.gallery-16{
    background-image: url(./images/g17.jpg);
}
.gallery-17 {
    background-image: url(./images/g18.jpg);
}

@media only screen and (max-width: 1200px) {
    .photo-text {
        width: 100%;
    }

    .gallery,
    .gallery-1,
    .gallery-2,
    .gallery-3,
    .gallery-4,
    .gallery-5,
    .gallery-6,
    .gallery-7,
    .gallery-8,
    .gallery-9,
    .gallery-10,
    .gallery-11,
    .gallery-12,
    .gallery-13,
    .gallery-14,
    .gallery-15, .galllery-16, .gallery-17 {
        display: block;
        margin: 0 auto;
        width: 100%;
        margin-bottom: 30px;
    }

    .gallery img {
        display: block;
        width: 100%;
        margin: 0 auto !important;
    }
}