.profilecards{  display: flex; flex-wrap: wrap; gap: var(--gutter); --card-padding:32px;
    --headshot_size:120px;
}
.profilecards>article{
    background: white; color:black;
    border-radius: var(--radius);  position: relative; /*overflow: hidden;*/

    width: calc(33.333% - (var(--gutter) * 0.6666));

    margin-top: calc((var(--headshot_size) / 2));
}
.profilecards>article :is(picture,txt) {   }


.profilecards>article .txt { padding: calc(var(--card-padding) - 8px) var(--card-padding) var(--card-padding); }

.profilecards>article h3 {  margin-bottom: 0.33em;  }
.profilecards>article p { font-size: var(--bodytext_size); line-height: 1.4; margin:0; }
.profilecards>article a { color:inherit; }

.profilecards > article a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

}
.profilecards>article picture:not(.profile_headshot){ background:var(--bg_blue); border-radius: var(--radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; position: relative; top: -1px;
   }
.profilecards>article picture:not(.profile_headshot)::before { display: block;   content:""; width: 100%; height: 0; padding-bottom: calc((var(--headshot_size) / 2) + var(--gutter)); }
.profilecards>article picture:not(.profile_headshot)::after { display: block;   content:""; width: 100%; height: 100%; top:0; left: 0; background: rgba(0,0,0,0.33); position: absolute; }


@media all and (max-width: 1199.98px) {
    .profilecards {
        --card-padding: 24px;
    }
}

@media all and (max-width: 899.98px) {
    .profilecards{ --headshot_size: 80px; }
    .profilecards>article {
           width: calc(50% - (var(--gutter) * 0.5));
    }
}
@media all and (max-width: 599.98px) {
    .profilecards {
        --card-padding: 20px;
        gap: var(--gutter_big);
    } .profilecards>article{ width: 100%; }
    .profilecards>article h3 {  }
    .profilecards>article{ flex-direction: column; }

}