.profile-pic-wrapper { 
    max-width: 150px;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 100%; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.profile-pic { 
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain; 
}



/* Override header.major max-content width when it contains profile components */
header.major:has(.profile-header-wrapper) {
    max-width: 100%;
    width: 100%;
}

.profile-header-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    flex-wrap: wrap;
    overflow: hidden;
}
.profile-header-wrapper h2 {
    margin: 0;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Responsive sizing for tablets and smaller */
@media screen and (max-width: 736px) {
    .profile-pic-wrapper {
        max-width: 100px;
    }
    
    .profile-header-wrapper {
        gap: 15px;
    }
}

/* Responsive sizing for phones */
@media screen and (max-width: 480px) {
    .profile-pic-wrapper {
        max-width: 80px;
    }
    
    .profile-header-wrapper {
        gap: 10px;
    }
}