///////////////////
//               //
//    MEDIAS     //
//               //
///////////////////


@use "@picocss/pico/scss/colors/index" as *;

.audio,
.stream {
  border: $purple-200 solid var(--pico-border-width);

  audio {
    border-radius: var(--pico-border-radius);
    width: 100%;
  }

  figcaption p {
    font-size: smaller;
    padding-left: .5em;
    text-align: left;
  }
}

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

  @media (min-width: 768px) {
    flex-direction: row;

    img {
      width: 8em;
    }

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

  }


  @media (min-width: 1024px) {

    div {
      flex-grow: 4;
    }
  }

  audio {
    border-radius: 0;
  }

}

figure {
  border-radius: var(--pico-border-radius);
  margin: var(--pico-spacing) auto;
  padding: .4em;
  border: $purple-200 solid var(--pico-border-width);
  width: 80%;

  img {
    width: 100%;
  }

  figcaption {
    font-size: smaller;

    p {
      margin: .2em 0;
      text-align: center;
    }
  }
}

.post-image {
  border: none;
  width: 100%;
  padding-left: 0;

  @media (min-width: 768px) {
    max-width: 97%;
    padding-right: 0;
  }
}