:root{--cover-height:220px}
.cover {
height: var(--cover-height);
background: linear-gradient(120deg,#4c6ef5,#15aabf);
position: relative;
border-radius: .5rem .5rem 0 0;
}
.profile-avatar {
width: 160px;
height: 160px;
border-radius: 50%;
border: 6px solid #fff;
object-fit: cover;
margin-top: calc(var(--cover-height) - 80px * -1);
transform: translateY(50%);
background:#fff;
}
.profile-card { margin-top: -80px }
.nav-profile .nav-link{ color:#495057 }
.post-card { border-radius: .75rem }
.small-muted { font-size: .85rem; color: #6c757d }


@media (max-width: 767.98px){
:root{--cover-height:140px}
.profile-avatar{ width:110px; height:110px; margin-top:-50px }
.profile-card{ margin-top: -55px }
}