@media (max-width: 920px){
  .ssf-avatar__head{
    flex-direction:column;
  }

  .ssf-avatar__quick{
    justify-content:flex-start;
    max-width:none;
  }

  .ssf-avatar__grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 640px){
  .ssf-avatar,
  .ssf-avatar__panel{
    width:100%;
  }

  .ssf-avatar__trigger,
  .ssf-avatar--guest{
    width:100%;
    justify-content:space-between;
  }

  .ssf-avatar__copy{
    flex:1;
    min-width:0;
  }

  .ssf-avatar__name{
    font-size:20px;
  }

  .ssf-avatar__panel{
    width:min(100vw - 20px, 100%);
    right:auto;
    left:0;
  }

  .ssf-avatar__grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}