/////////////////// // // // MEDIAS // // // /////////////////// .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%; width: fit-content; } img { width: 100%; } figcaption { font-size: $font-size-small; p { margin: .2rem 0; text-align: center; } } } .post-image { border: none; margin-left: 0; padding-left: 0; @include breakpoint(laptop) { max-width: 97%; margin-right: 0; padding-right: 0; } }