:root {
    --intro-max-width: 600px;
    --image-max-width: 90vw;
    font-family: sans-serif;
}

/* debug borders */
/*.debug {
    border-style: solid;
    border-width: 2px;
    border-color: magenta;
} */

/* Base Layout */
body {
    margin: 0;
}
/* Photo Gallery Scrolling Layout */
.gallery-wall {
    height: 90vh;
    white-space: nowrap;
    width: 100%;
    overflow-inline: scroll;
    box-sizing: border-box;
}

.gallery-wall>span {
    display: inline-block;
    white-space: normal;
    height: 100%;
    vertical-align: bottom;
    box-sizing: border-box;
}

/* first column of horizontal scroll holds the gallery title and introduction copy */
.gallery-intro {
    width: 50vw;
    max-width: var(--intro-max-width);
    margin-inline-start: 2em;
}

/* each image is presented in an image-section div */
.image-section {
    height: 100%;
    max-width: 100vw;

    align-content: center;
    margin-inline: 2em;
}

.image-section img {
    max-height: 80%;
    max-width: 100%;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    box-sizing: border-box;
}

/* scroll snapping */
.gallery-wall {
    scroll-snap-type: inline;
}

.gallery-wall>* {
   scroll-snap-align: center;
}

/* photo gallery styling */

.framed-photo {
    border-width: 1em;
    padding: 2em;
    border-style: solid;
    border-color: black;
}

.image-description {
    border-style: solid;
    border-color: black;
    border-width: .2em;
    padding: 1em;
    width: 15em;
    max-width: 100%;
    height: 5em;
    margin-top: 2em;
}

.image-description>* {
    margin: 0;
}