@layer page{.profile-card{z-index:0;--banner-size:200px;--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);overflow:hidden;& img{object-fit:cover;width:100%;height:100%}}& .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}& .metadata-table{padding:1rem}& .gender-color{color:var(--gender);font-weight:600}}.gender-text{font-family:var(--font-monospace)}}