.photoColor {
    background-color: var(--primary-color);
}
h2.photoGalleryName {
    font-size: 1.3rem;
    color: var(--white);
    text-align: center;
    padding-top: 35px;
}
.photoContainer {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}
.onePhoto {
    max-width: 600px;
}
.twoPhoto {
    max-width: 1200px;
}
.grid-wrapper {
    padding: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /*grid-auto-rows: 200px;*/
    /*grid-auto-flow: dense;*/
    gap: 25px;
}
.grid-wrapper > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.grid-wrapper figcaption {
    font-size: .9rem;
    text-align: center;
    padding: 10px 10px 10px 10px;
    color: hsl(from var(--primary-color) h s calc(1 + 80));
}
.grid-wrapper > div > img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    vertical-align: middle;
    display: inline-block;
    display: inline;
    border-radius: 10px;
    object-fit: contain;
    padding: 20px;
    background-color: var(--mainText);
}
.wide {
    grid-column: span 2;
}
.tall {
    grid-row: span 2;
}
.big {
    grid-row: span 2;
    grid-column: span 2;
}


@media (max-width: 700px) {
    .grid-wrapper {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .onePhoto {
        width: 100%!important;
        height: auto;
    }
    .wide {
        grid-column: span 1;
    }
    .tall {
        grid-row: span 1;
    }
    .big {
        grid-row: span 1;
        grid-column: span 1;
    }
    .grid-wrapper > div > img {
        width: 75%;
        height: auto;
        object-fit: contain;
    }
}


/*:root {*/
/*    --base-color: hsl(223, 18%, 20%);*/
/*    --primary-color: hsl(from var(--base-color) h s calc(1 + 10));*/
/*}*/
/* Style the main nav container */
/*region Nav Bar*/
/*
 */
/*endregion*/