@layer components{.profile-wall{position:relative;display:grid;grid-template-columns:7rem auto;gap:var(--size-500);padding:var(--size-500);border-radius:var(--size-100);background-color:var(--clr-primary-200-image);background-position:center;background-size:cover;box-shadow:rgba(0,0,0,.12) 0 .125rem .25rem 0}.profile-wall::before{content:"";position:absolute;inset:0;z-index:5;width:100%;height:100%;border-radius:var(--size-100);opacity:.7;background:var(--body-home-grd);pointer-events:none}.profile-wall-avatar{position:relative;z-index:5;align-self:center;width:7rem;aspect-ratio:1;border-radius:var(--size-100)}.profile-wall-avatar::before{content:"";position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:.05;background:var(--body-home-grd);pointer-events:none}.profile-wall-avatar .edit{position:absolute;right:0;bottom:0;z-index:10;margin:var(--size-200)}.profile-wall-avatar-upload-file{display:none}.profile-wall-avatar-upload-file.open{position:absolute;right:0;bottom:0;z-index:5;display:block;padding:var(--size-200)}.profile-wall-avatar-upload-file.open input{position:absolute;top:1rem;right:0;width:7rem;overflow:hidden;font-size:var(--size-300)}.profile-wall-error{display:none}.profile-wall-error.open{position:absolute;left:var(--size-100);bottom:var(--size-100);z-index:10;display:block;width:10rem;height:min-content;padding:var(--size-500);border-radius:var(--size-100);background-color:var(--clr-accent-200);box-shadow:0 .125rem .321rem 0 rgba(0,0,0,.1)}.profile-wall-error.open::before{content:"\f04b";position:absolute;right:-.63rem;bottom:.94rem;color:var(--clr-accent-200)}.profile-wall-error.open .error{font-size:.63rem;color:var(--clr-text-neutral-100)}.profile-wall-information{z-index:10;display:grid;gap:var(--size-300)}.profile-wall-information-header{display:grid;align-content:center;color:var(--clr-text-neutral-100)}.profile-wall-information-header .fs-700{font-size:var(--size-625)}.profile-wall-edit{position:absolute;right:0;bottom:0;z-index:5;margin:var(--size-500)}.profile-wall-avatar-wrapper{display:flex}.profile-wall-avatar-wrapper.show{inset:0;width:auto;height:auto}.profile-wall-avatar-wrapper.show p{font-size:.6rem}@media (min-width:50rem){.profile-wall{grid-template-columns:12.06rem auto;gap:2.5rem}.profile-wall-avatar{width:12.06rem}.profile-wall-avatar-upload-file.open input{position:relative;top:auto;right:auto;width:100%}.profile-wall-information-header .fs-700{font-size:var(--size-700)}}}