.audio,
.stream {
  border: $dark-polar solid 1px;

  audio {
    border-radius: .5rem;
    width: 100%;
  }

  figcaption p {
    font-size: $font-size-small;
    padding-left: .5rem;
    text-align: left;
  }
}

.audio-with-image {
  display: flex;
  flex-direction: column;

  @include breakpoint(tablet) {
    flex-direction: row;

    img {
      width: 8rem;
    }

    div {
      align-content: space-between;
      display: flex;
      flex-flow: wrap;
    }

  }


  @include breakpoint(laptop) {

    div {
      flex-grow: 4;
    }
  }

  audio {
    border-radius: 0;
  }

}

figure {
  border-radius: 5px;
  margin-left: .4rem;
  margin-right: .4rem;
  padding: .4rem;
  border: $dark-polar solid 1px;

  @include breakpoint(laptop) {
    max-width: 80%;
  }

  img {
    width: 100%;
  }

  p {
    margin: .2rem 0;
    text-align: center;
    font-size: $font-size-small;
  }
}