/* CSS for Gallery */
#gallery-content {
    min-height: 90vh;
    padding: 0 4rem;
    margin: 10vh auto 0 auto;
    background-color: white;
}

#gallery-content h1 {
    font-family: 'Montserrat', sans-serif;
    color: black;
    font-size: 4em;
    padding: 50px 0;
    text-align: center;
}

#gallery-popup {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

#gallery-popup.display {
    opacity: 1;
    visibility: visible;
}

#popup-photo-container {
    position: absolute;
    margin: auto;
    padding-bottom: 80px;
    border-radius: 20px;
    top: 10vh;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: white;
    /* overflow-y: scroll; */
    width: 60%;
    max-height: 80%;
    opacity: 1;
    z-index: 2;
}

#close-gallery-popup {
    position: absolute;
    border: none;
    background-color: transparent;
    cursor: pointer;
    right: 10px;
    top: 10px;
    z-index: 10;
}

#alt-text {
    text-align: center;
    padding: 30px;
    color: #6678B1;
    /* border-bottom: 1px solid #6678B1; */
}

#image-display {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 800px; */
    height: 100%;
    padding-bottom: 70px;
    overflow: hidden;
}

#image-display img {
    max-height: 100%;
    max-width: 90%;
}


#gallery-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 14.5rem);
    gap: 1rem;
}

#gallery-photos img {
    width: 100%;
    /* height: 100%; */
    transition: all 0.5s ease-in-out;
}

.photo-container {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.photo-container:hover img {
    transform: scale(1.15);
    transition: all 0.3s ease-in-out;
}

.photo-container-1 {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

.photo-container-2 {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}

.photo-container-3 {
    grid-column: 2 / span 1;
    grid-row: 1 / span 2;
}

.photo-container-4 {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}

.photo-container-5 {
    grid-column: 3 / span 1;
    grid-row: 2 / span 2;
}


.photo-container-9 {
    grid-column: 1 / span 1;
    grid-row: 2 / span 2;
}

.photo-container-10 {
    grid-column: 1 / span 2;
    grid-row: 4 / span 2;
}

.photo-container-12 {
    grid-column: 4 / span 1;
    grid-row: 1 / span 2;
}


.photo-container-16 {
    grid-column: 4 / span 1;
    grid-row: 4 / span 2;
}

.photo-container-17 {
    grid-column: 2 / span 1;
    grid-row: 7 / span 2;
}

.photo-container-18 {
    grid-column: 3 / span 2;
    grid-row: 7 / span 2;
}

.photo-container-19 {
    grid-column: 3 / span 1;
    grid-row: 5 / span 2;
}

@media screen and (max-width: 1600px){
    #gallery-photos {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(9, 16rem);
        gap: 1rem;
    }

    .photo-container-10 {
        grid-column: 1 / span 1;
        grid-row: 4 / span 1;
    }

    .photo-container-12 {
        grid-column: span 1;
        grid-row: span 2;
    }


    .photo-container-16 {
        grid-column: span 1;
        grid-row: span 2;
    }

    .photo-container-18 {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media screen and (max-width: 1300px){
    #gallery-photos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(14, 19rem);
        gap: 1rem;
    }


    .photo-container-4 {
        grid-column: span 1;
        grid-row:  span 1;
    }

    .photo-container-5 {
        grid-column: span 1;
        grid-row: span 2;
    }


    .photo-container-19 {
        grid-column: span 1;
        grid-row:  span 2;
    }
}

@media screen and (max-width: 1000px){
    #gallery-photos {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(20, 35rem);
        gap: 1rem;
    }

    .photo-container-3 {
        grid-column: span 1;
        grid-row: span 2;
    }

    .photo-container-17 {
        grid-column: span 1;
        grid-row: span 2;
    }

    #popup-photo-container {
        position: absolute;
        margin: auto;
        padding-bottom: 80px;
        border-radius: 20px;
        top: 10vh;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: white;
        /* overflow-y: scroll; */
        width: 60%;
        max-height: 50%;
        opacity: 1;
        z-index: 2;
    }
}