#intro .text {
    max-width: 40em;
}
#intro figure {
    position: relative;
}
#intro img {
    width:100%;
    min-width: 26em;
    height:auto;
}


/* QUOTE */

#quote .container   {
    padding-top: 0;
    text-align: center;
    max-width: 55em;}
#quote h2 {
    font-size: clamp(1.5rem, 1rem + 1vw, 1.75rem);
    line-height: 1.8;
    font-weight: 500;
    max-width: 30em;
    margin-bottom: 0;
    margin: 1em 0
}

/* STAFF MEMBERS */

#staff .container {
    flex-direction: column;
}
#staff h2 {margin-bottom: 0;}


/* STAFF */
#staff_members {
    display: flex;
    justify-content: center;
    margin-top: 3em;
    gap: 1em;
    flex-wrap: wrap
}
#staff_members a {
    flex-basis: calc(25% - .75em);
}

#staff_members figure {
    position: relative;

}
#staff_members img {
    width:100%;
}
#staff_members figcaption {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    text-align: center;
    color:white;
    background: hsla(0,0%,0%,.6);
    padding: 1.5em calc(1em + .5vw) 1.625em;
}

#staff_members h3 {
    margin-top: 0;
    font-family: var(--font-header);
    font-size: calc(1.325rem + .25vw) ; /* 18/14 = ~1.325rem */
    font-weight: 400;
    margin-bottom: .25em;
    transition: color .25s;
}
#staff_members a:hover h3{
    color:var(--light-gold-color);
}
#staff_members h4 {
    margin: 0;
    font-weight: 400;
}

/* REASONS & ACCORDION */

#reasons {background-color:var(--powder-color)}
#reasons .container {
    flex-direction: column;
}

@media only screen and (max-width: 80rem) {
    #staff_members a {
        flex-basis: calc(33.33% - .67em);
    }
}
@media only screen and (max-width: 64rem) {
        #staff_members {flex-wrap: wrap;}
        #staff_members a {
            flex-basis: calc(50% - .5em);
        }
        
        #intro .container {padding-left: 0;}
        #intro figure {margin-bottom:0}
}

@media only screen and (max-width:53.125rem) {
        #intro .container {
            flex-direction: column-reverse;
            align-items: center;
            max-width: 40em;
            padding-left: 1.5em;
        }
        #intro figure {
            margin-top: calc(2.5vw + 4em);
            box-shadow: none;
          }
          
    
        #intro img {
            min-width: 0;;
        }
        #intro  .text-wrapper.left {margin-left: 0; max-width: none;}

}


@media only screen and (max-width: 40rem) {
    #staff_members a {
        flex-basis: 100%;
        max-width: 25em;
    }
   
}