#teammeta {
    width:var(--grid-half);

    background: white;

    max-width: 480px; border-radius: var(--radius);
    --padding:40px;
    padding: var(--padding);
    /*    display: grid;
        grid-template-columns: 1fr 1fr;*/

   /* display: flex; flex-wrap: wrap;*/
    gap: var(--gutter);
    align-self: flex-start;
}
#teammeta > figure { display: block; width: 100%; height: auto;
    position: relative; margin-bottom: 32px; }
#teammeta > figure::after { content:""; display: block; width: 100%; height: 0; padding-bottom: 100%; }

#teammeta > figure picture { width: 100%; height: 100%;
    position: absolute; top: 0; left: 0; border-radius: var(--radius); }


#teammeta dl {
    font-size: var(--bodytext_size);line-height: 1.2;
}
#teammeta dt,
#teammeta dd {
    display: inline;
    vertical-align: top;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    font-size: inherit;
}
#teammeta dt {
    font-weight: 700;
    margin-right: 0.333em;
}

#teammeta dd {
    font-weight: 500;
}

#teammeta dt::after {
    content: " ";
}

#teammeta dd:not(:last-child)::after {
    content: "\A"; /* line break after each <dd> */
    white-space: pre; margin-bottom: 0.5em;
    height: 1px;  display: block;
}


/*#teammeta dd:not(:last-child) {
    margin-bottom: 16px;
}*/

.linkedin_icon {  transform: translate(6px,-6px); float: right;  width: 100px; display: block; width: 48px; height: 48px; border-radius: 4px; display: flex; align-items: center; justify-content: center;}
.linkedin_icon .icon { font-style: normal !important; color:var(--ttl_black); }
.linkedin_icon .icon::after { font-family: "ttl_icons";  font-size: var(--icon);   content:"\E80f"; display: block; font-size: 32px;}
.linkedin_icon a.linkedin:is(:hover,:focus-visible) {
    opacity: 0.8;}
.linkedin_icon a.linkedin:focus-visible {
    /* outline:2px solid var(--ttl_error); outline-offset: 2px; */ outline: 3px solid black; box-shadow: 0 0 0 6px white;
}


/*
dl {

}

dt {

    float: left; !* Aligns the dt to the left *!
    clear: left; !* Ensures each dt starts on a new line after floating elements *!
    margin-right: 0.5em; !* Adds some space between dt and dd *!
}

dd {
    margin-left: 0; !* Removes default margin for dd *!
    display: flow-root; !* Creates a new block formatting context to contain floats *!
}

*/



@media (prefers-color-scheme: dark) {
    #teammeta { background-color: var(--ttl_footer-2); }
    #teammeta dd a {background: rgba(255,255,255,0.8); color: var(--ttl_black);  }
}

@media all and (max-width:899.98px) {
    #teammeta {
        width: 100%; /*max-width: 999px;*/
        --padding:24px;
    }

    .pageheader > .wrapper:has(#teammeta) { display: block !important;}

    #teammeta > figure {  margin-bottom: var(--padding); }
}
@media all and (max-width:599.98px) {
    #teammeta {
        --padding:16px;

    }


    #teammeta dt {

    }
    #teammeta dd {

    }

    #teammeta dl {
        width: 100%;
    }
}




:is(li,dd) i.icon::after {
    font-family: "ttl_icons";
    font-size: 14px; margin-left: 4px;

}
:is(li,dd)[class^="format_"] { display: inline-flex; align-items: center; }
:is(li,dd).format_video i.icon::after { content:"\E814"; }
:is(li,dd).format_audio i.icon::after { content:"\E801" }
:is(li,dd).format_text i.icon::after { content:"\E811"; }