body {
    background-color: crimson;
}
h1, h6 {
    text-align: center;
}
a {
    text-decoration: none;
}
p {
    padding: .2em 2em .2em 2em;
}
.adventureContainer {
    position: relative;
    max-width: 80em;
    width: 95%;
    /* remove fixed minimum width so smaller screens can scale */
    box-sizing: border-box;
    height: auto;
    border: .5em solid yellow;
    margin: 1em auto;
    padding: 0.5em;
}
.title {
    position: absolute;
    height: 2.8em;
    border: .05em solid salmon;
    top: 25.6em;
    margin-left: .2em;
    text-align: center;
    font-family: cursive;
    width: calc(100% - 0.4em);
}
.pic {
    position: absolute;
    height: 13.9em;
    border: .2em solid blue;
    top: 29em;
    max-width: 100%;
}
.characterContainer {
    /* Ensure the container participates in normal flow; layout handled by flex rules below */
    position: static;
    margin: 0;
    padding: 0.25rem 0;
    border: none;
    text-align: center;
}
#one {
    width: 18.8em;
    left: 8%;
}
#two {
    width: 10.5em;
    left: 40%;
}
#three {
    width: 10.8em;
    left: 60%;
}
#four {
    width: 10.4em;
    left: 80%;
}
.previous, .next {
    width: 6em;
    height: auto;
    margin: auto;
}
  footer {
    text-align: right;
    font-size: 8px; 
 }

/* Make images and other replaced content scale on small screens */
img, .pic img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .adventureContainer {
        width: 98%;
        padding: 0.75em;
        border-width: .4em;
    }
    .title { top: auto; position: relative; height: auto; margin-bottom: .5em; }
    .pic { position: relative; top: auto; height: auto; margin-bottom: .5em; }
    .characterContainer { position: relative; margin-left: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; padding: .5em 0; }
    #one, #two, #three, #four { left: auto; max-width: 45%; width: 45%; }
    footer { text-align: center; font-size: 11px; }
}

@media (max-width: 420px) {
    .adventureContainer { padding: .5em; border-width: .3em; }
    .title { font-size: 1.1rem; }
    .characterContainer { gap: .4em; }
    #one, #two, #three, #four { width: 100%; max-width: 100%; }
    p { padding: .5em 1em; }
}

/* New gallery and image styles */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: stretch;
    /* make each grid row stretch so cards can match height */
    grid-auto-rows: 1fr;
}
.card { margin: 0; border: .05em solid rgba(255,255,255,0.05); overflow: hidden; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; height: 100%; }
.card img.feature-img { width: 100%; height: auto; display: block; object-fit: cover; /* allow image to grow/shrink to fill card */ flex: 1 1 auto; }
.card figcaption { text-align: center; padding: .4em .2em; font-weight: bold; flex: 0 0 auto; }

/* character images */
.characterContainer { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.characterContainer h6 { width: 100%; text-align: center; }
.char-img {
    width: 6.5rem;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: crimson; /* user requested crimson background for thumbnails */
    border-radius: 4px;
    display: inline-block;
}

/* Responsive gallery breakpoints */
@media (max-width: 1024px) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .gallery { grid-template-columns: 1fr; }
    .char-img { width: 28%; aspect-ratio: 1/1; }
}