.follow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: center;
  gap: 14px 20px;
  padding: 18px 35px 23px;
  border-top: 1px solid #e6e9e0;
  background: #f8faf6;
}

.follow-copy strong {
  display: block;
  color: #294c3d;
  font-size: 13px;
}

.follow-copy span,
.follow-copy p {
  display: block;
  margin: 5px 0 0;
  color: #789083;
  font-size: 11px;
  line-height: 1.6;
}

.follow-copy p { color: #8b9c90; }
.button-record { background: #eaf2e8; border: 1px solid #c8dac8; color: #2d6349; }
.button-record:hover { background: #deecdc; }
.button-record:disabled { cursor: wait; opacity: .6; }
.follow.is-recording .button-record { background: #b3514a; border-color: #b3514a; color: #fff; }
#recordingPlayback { grid-column: 1 / -1; width: min(100%, 470px); height: 42px; justify-self: center; }
#recordingPlayback[hidden] { display: none; }

@media (max-width: 680px) {
  .follow { grid-template-columns: 1fr; gap: 13px; padding: 18px 18px 21px; }
  .button-record { width: 100%; }
  #recordingPlayback { width: 100%; }
}