.profile-banner{aspect-ratio:16/9;background-color:#e5e7eb;border-radius:.5rem;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.dark .profile-banner{background-color:#1f2937}.banner-image{-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;width:100%;height:100%;transition:opacity .3s ease-in-out}.banner-placeholder{color:#9ca3af;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.banner-placeholder-text{margin-top:.5rem;font-size:.875rem;font-weight:500}.banner-edit-button{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:20;background-color:#00000080;border:none;transition:all .2s;position:absolute;bottom:1rem;right:1rem}.banner-edit-button:hover{background-color:#000000b3;transform:translateY(-2px)}@media (max-width:767px){.profile-banner{max-height:200px}}@media (min-width:768px) and (max-width:1023px){.profile-banner{max-height:300px}}@media (min-width:1024px){.profile-banner{max-height:400px}}