.profile-card{z-index:0;--banner-size:150px;--pfp-size:125px;padding:0;position:relative;& .banner{width:100%;height:var(--banner-size);background-color:light-dark(var(--color-sky-100),var(--color-sky-800));border-top-left-radius:var(--rounding);border-top-right-radius:var(--rounding)}& .pfp{z-index:0;--padding:1rem;left:var(--padding);top:calc(var(--banner-size) - (var(--pfp-size)/2));width:var(--pfp-size);height:var(--pfp-size);outline:4px solid var(--background-panel);background-color:var(--background-panel);position:absolute;&:dir(rtl){right:var(--padding);left:auto}&:dir(ltr){left:var(--padding)}}& .riding{top:var(--banner-size);flex-direction:row;justify-content:flex-end;align-items:center;width:100%;padding-top:1rem;padding-right:1rem;display:flex;position:absolute}& .content{margin-top:calc((var(--pfp-size)/2));padding:0 1rem;& h1{margin-bottom:0}}& .name{margin-bottom:1rem}& table{border:0;flex-flow:wrap;gap:.5rem;margin-top:1rem;padding:0 1rem 1rem;font-size:.9rem;display:flex;& tbody{flex-flow:wrap;gap:1rem;display:flex}& tr{flex-direction:row;gap:.5rem;display:flex}& th{color:var(--foreground-secondary);text-align:left;font-weight:400}}& .gender-color{color:var(--gender);font-weight:600}}.gender-text{font-family:var(--font-monospace)}