*, *::before, *::after { box-sizing: border-box; }

.layout {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr 1.618033988749fr;
}

.sidebar {
  padding: 2rem;
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
  text-align: right;
}

.avatar {
  width: 200px;
  height: 200px;
  object-fit: cover; 
  border-radius: 5%; 
}

.mobile-only { display: none !important; }

/* phones */
@media (max-width: 600px) {
    .desktop-only { display: none !important; }
    .mobile-only  { display: inline !important; }
    .layout {
        grid-template-columns: 1fr;
    }
    .avatar {
        align-items: center;
        display: block;
        margin: 0 auto;
        margin-top: 1rem;
    }
    .sidebar {
        text-align: left;
        background: var(--bg-sidebar);
    }
    .content {
        padding-top: 0rem;
    }
}