#generation-parents .carousel-container {
    max-width: 25%
}

#generation-elders .carousel-container {
    max-width: 22%
}

@media screen and (max-width: 1100px) {

    .generation {
        flex-wrap: wrap;
        height: auto;
    }

    #generation-puppies{
        height: auto;
        padding-top: 0;
        flex-flow: wrap-reverse;
    }

    #generation-elders {
        height: auto;
        padding-top: 15vh;
        padding-bottom: 5vh;
    }

    #generation-elders .carousel-container {
        max-width: 40%;
        height: 20vh;
        padding-bottom: 3vh;
        margin-top: 10vh;
    }

    #generation-parents {
        height: auto;
        margin: 0px;
    }

    #generation-parents .carousel-container {
        width: 40%;
        max-width: 40% ;
        margin-top: 10vh;
    }

    .carousel-img {
        object-position: var(--focus-tablet, var(--focus, 50% 50%));
        transform: scale(var(--zoom-tablet, var(--zoom, 1)));
        transform-origin: var(--focus-tablet, var(--focus, 50% 50%));
    }

    #generation-puppies .carousel-container {
        width: 60%;
        height: 60%;
    }

    #carousel-container-Puppy_1 {
        transform: translate(-15%, 5%);
    }

    #carousel-container-Puppy_2 {
        transform: translate(15%, 5%);
    }

    #carousel-container-Puppy_3 {
        transform: translate(-15%, 5%);
    }

    #carousel-container-Puppy_4 {
        transform: translate(15%, 5%);
    }

    #carousel-container-Puppy_5 {
        transform: translate(-15%, 5%);
    }

    .carousel-container {
        width: calc(40.33% - 10px);
    }

    .carousel-title-container {
        z-index: var(--z-chrome);
        width: 80%;
        left:10%;
        position: relative;
        top:70% ;
        height:50%
    }

}
/* Phone proper. Below 640px the bubbles are near-full-width circles and a
   framing that reads fine on a tablet can put a face against the edge, so this
   tier takes its own value. Each level falls back to the one above it, so a
   photo only needs a value where it actually differs. */
@media screen and (max-width: 640px) {

    .carousel-img {
        object-position: var(--focus-phone, var(--focus-tablet, var(--focus, 50% 50%)));
        transform: scale(var(--zoom-phone, var(--zoom-tablet, var(--zoom, 1))));
        transform-origin: var(--focus-phone, var(--focus-tablet, var(--focus, 50% 50%)));
    }
}