.balloon {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}
.balloon.left { flex-direction: row; }
.balloon.right { flex-direction: row-reverse; }
.balloon .speaker-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-right: 8px;
}
.balloon p {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  position: relative;
}
@media screen and (max-width: 768px){
  .balloon {
  margin-top: 5.333vw;
  }
  .balloon .speaker-avatar {
    width: 14.933vw;
    height: 14.933vw;
    margin-right: 2.133vw;
  }
  .balloon p {
    padding: 5.333vw;
    border-radius: 5.333vw;
}

}