body {
    font-family: DM Sans;
    margin: 0;
    background-color: white;
}


.gallery {
    display: flex;
    flex-direction: column;
    margin: 0 4rem 3rem 443m;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.thumbnail  {
    flex: 1;
    display: flex;
    justify-content: center;
    
    align-items: flex-end;
    color: white;

    height: 50vh;

    /* background sizing */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* GALLERY IMAGES */

.gallery img {
    width: 100%;
    height: 100%;
}

/* ROW 1 */

#img1 {
    background-image: url(../images/resize-images/image-1.jpg);
}


#img2 {
    background-image: url(../images/resize-images/image-2.jpg);
}

#img3 {
    background-image: url(../images/resize-images/image-3.jpg);
}

#img4 {
    background-image: url(../images/resize-images/image-4.jpg);
}

/* ROW 2 */

#img5 {
    background-image: url(../images/resize-images/image-5.jpg);
}

#img6 {
    background-image: url(../images/resize-images/image-6.jpg);
}

#img7 {
    background-image: url(../images/resize-images/image-7.jpg);
}

#img8 {
    background-image: url(../images/resize-images/image-8.jpg);
}

/* ROW 3 */

#img9 {
    background-image: url(../images/resize-images/image-9.jpg);
}


#img10 {
    background-image: url(../images/resize-images/image-10.jpg);
}

#img11 {
    background-image: url(../images/resize-images/image-11.jpg);
}

#img12 {
    background-image: url(../images/resize-images/image-12.jpg);
}



footer {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.footer-text {
    font-size: 0.8rem;
    color: black;
}
  
/* RESPONSIVE */

@media (max-width: 768px) {

    .title {
        margin-top: 1.2rem;
    }

    h1{
        font-size: 2rem;
    }

    .gallery{
        margin: 0 2rem 1rem 2rem;
    }

    .thumbnail {
        flex: 1 1 calc(50% - 0.4rem);
        height: 50vh;
    }


}