.wrap {
  width: min(1220px, calc(100% - 2rem));
}

.friends-grid {
  grid-template-columns: repeat(3, 320px);
  justify-content: center;
  column-gap: 2rem;
  row-gap: 2.25rem;
  padding-inline: 0;
}

.friend-head {
  gap: .55rem;
  padding: .6rem .7rem;
}

.friend-head img {
  width: 40px;
  height: 40px;
}

.friend-head h2 {
  font-size: 1rem;
}

.friend-copy {
  padding: .6rem .7rem .75rem;
  font-size: .8rem;
}

.friend-copy p {
  display: -webkit-box;
  margin: .55rem 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.player {
  width: calc(100% - 12px);
  max-width: none;
  margin-inline: 6px;
}

.friend.live { grid-column: span 2; }
.live-media{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,.85fr);gap:6px;padding:0 6px}.live-media .player{width:100%;max-width:none;margin:0}.chat{min-width:0;overflow:hidden;border:1px solid #ffffff18;border-radius:.65rem;background:#0e0b12}.chat iframe{display:block;width:100%;height:100%;min-height:230px;border:0}

@media (max-width: 1080px) {
  .friends-grid { grid-template-columns: repeat(2, 320px); }
}

@media (max-width: 640px) {
  .friends-grid { grid-template-columns: minmax(0, 320px); }
  .friend.live{grid-column:span 1}.live-media{grid-template-columns:1fr}.chat iframe{min-height:300px}
}