/* Gallery Container */
#index-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
    grid-template-areas: 
    "gallery-h2 gallery-h2 gallery-h2 gallery-h2 gallery-h2"
    "img1 img2 img3 img4 img5"
    "img6 img2 img7 img7 img5"
    "img6 img8 img9 img10 img11"
    "img12 img13 img14 img10 img15"
    "img16 img13 img17 img18 img18"
    "img19 img20 img17 img21 img22"
    "img19 img23 img24 img25 img22"
    "img26 img23 img27 img28 img29"
    "img30 img31 img31 img32 img33"
    "img34 img35 img36 img37 img33"
    "img38 img39 img36 img40 img40"
    "img41 img42 img42 img43 img44"
    "img41 img45 img46 img46 img46";
}

#index-gallery .gallery-img {
    width: auto;
    height: 150px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* Images */
#index-gallery p {
    grid-area: gallery-p;
}
#index-gallery h2 {
    grid-area: gallery-h2;
}
#index-gallery .img1 {
    grid-area: img1;
    background-image: url(../../images/thumbs/img1.jpg);
}
#index-gallery .img2 {
    grid-area: img2;
    background-image: url(../../images/thumbs/img2.jpg);
    height: 310px;
}
#index-gallery .img3 {
    grid-area: img3;
    background-image: url(../../images/thumbs/img3.jpg);
}
#index-gallery .img4 {
    grid-area: img4;
    background-image: url(../../images/thumbs/img4.jpg);
}
#index-gallery .img5 {
    grid-area: img5;
    background-image: url(../../images/thumbs/img5.jpg);
    height: 310px;
}
#index-gallery .img6 {
    grid-area: img6;
    background-image: url(../../images/thumbs/img6.jpg);
    height: 310px;
}
#index-gallery .img7 {
    grid-area: img7;
    background-image: url(../../images/thumbs/img7.jpg);
}
#index-gallery .img8 {
    grid-area: img8;
    background-image: url(../../images/thumbs/img8.jpg);
}
#index-gallery .img9 {
    grid-area: img9;
    background-image: url(../../images/thumbs/img9.jpg);
}
#index-gallery .img10 {
    grid-area: img10;
    background-image: url(../../images/thumbs/img10.jpg);
    height: 310px;
}
#index-gallery .img11 {
    grid-area: img11;
    background-image: url(../../images/thumbs/img11.jpg);
}
#index-gallery .img12 {
    grid-area: img12;
    background-image: url(../../images/thumbs/img12.jpg);
}
#index-gallery .img13 {
    grid-area: img13;
    background-image: url(../../images/thumbs/img13.jpg);
    height: 310px;
}
#index-gallery .img14 {
    grid-area: img14;
    background-image: url(../../images/thumbs/img14.jpg);
}
#index-gallery .img15 {
    grid-area: img15;
    background-image: url(../../images/thumbs/img15.jpg);
}
#index-gallery .img16 {
    grid-area: img16;
    background-image: url(../../images/thumbs/img16.jpg);
}
#index-gallery .img17 {
    grid-area: img17;
    background-image: url(../../images/thumbs/img17.jpg);
    height: 310px;
}
#index-gallery .img18 {
    grid-area: img18;
    background-image: url(../../images/thumbs/img18.jpg);
}
#index-gallery .img19 {
    grid-area: img19;
    background-image: url(../../images/thumbs/img19.jpg);
    height: 310px;
}
#index-gallery .img20 {
    grid-area: img20;
    background-image: url(../../images/thumbs/img20.jpg);
}
#index-gallery .img21 {
    grid-area: img21;
    background-image: url(../../images/thumbs/img21.jpg);
}
#index-gallery .img22 {
    grid-area: img22;
    background-image: url(../../images/thumbs/img22.jpg);
    height: 310px;
}
#index-gallery .img23 {
    grid-area: img23;
    background-image: url(../../images/thumbs/img23.jpg);
    height: 310px;
}
#index-gallery .img24 {
    grid-area: img24;
    background-image: url(../../images/thumbs/img24.jpg);
}
#index-gallery .img25 {
    grid-area: img25;
    background-image: url(../../images/thumbs/img25.jpg);
}
#index-gallery .img26 {
    grid-area: img26;
    background-image: url(../../images/thumbs/img26.jpg);
}
#index-gallery .img27 {
    grid-area: img27;
    background-image: url(../../images/thumbs/img27.jpg);
}
#index-gallery .img28 {
    grid-area: img28;
    background-image: url(../../images/thumbs/img28.jpg);
}
#index-gallery .img29 {
    grid-area: img29;
    background-image: url(../../images/thumbs/img29.jpg);
}
#index-gallery .img30 {
    grid-area: img30;
    background-image: url(../../images/thumbs/img30.jpg);
}
#index-gallery .img31 {
    grid-area: img31;
    background-image: url(../../images/thumbs/img31.jpg);
}
#index-gallery .img32 {
    grid-area: img32;
    background-image: url(../../images/thumbs/img32.jpg);
}
#index-gallery .img33 {
    grid-area: img33;
    background-image: url(../../images/thumbs/img33.jpg);
    height: 310px;
}
#index-gallery .img34 {
    grid-area: img34;
    background-image: url(../../images/thumbs/img34.jpg);
}
#index-gallery .img35 {
    grid-area: img35;
    background-image: url(../../images/thumbs/img35.jpg);
}
#index-gallery .img36 {
    grid-area: img36;
    background-image: url(../../images/thumbs/img36.jpg);
    height: 310px;
}
#index-gallery .img37 {
    grid-area: img37;
    background-image: url(../../images/thumbs/img37.jpg);
}
#index-gallery .img38 {
    grid-area: img38;
    background-image: url(../../images/thumbs/img38.jpg);
}
#index-gallery .img39 {
    grid-area: img39;
    background-image: url(../../images/thumbs/img39.jpg);
}
#index-gallery .img40 {
    grid-area: img40;
    background-image: url(../../images/thumbs/img40.jpg);
}
#index-gallery .img41 {
    grid-area: img41;
    background-image: url(../../images/thumbs/img41.jpg);
    height: 310px;
}
#index-gallery .img42 {
    grid-area: img42;
    background-image: url(../../images/thumbs/img42.jpg);
}
#index-gallery .img43 {
    grid-area: img43;
    background-image: url(../../images/thumbs/img43.jpg);
}
#index-gallery .img44 {
    grid-area: img44;
    background-image: url(../../images/thumbs/img44.jpg);
}
#index-gallery .img45 {
    grid-area: img45;
    background-image: url(../../images/thumbs/img45.jpg);
}

/* Gallery Image Titles */
.gallery-img div {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-img a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
}

.gallery-img div:hover {
    opacity: 0.8;
    transition: all ease-in-out 100ms;
}