.#{$uiName}-media
  align-items: flex-start
  display: flex
  text-align: left
  .#{$uiName}-content:not(:last-child)
    margin-bottom: 0.75rem
  .#{$uiName}-media
    border-top: 1px solid rgba($border, 0.5)
    display: flex
    padding-top: 0.75rem
    .#{$uiName}-content:not(:last-child),
    .#{$uiName}-control:not(:last-child)
      margin-bottom: 0.5rem
    .#{$uiName}-media
      padding-top: 0.5rem
      & + .#{$uiName}-media
        margin-top: 0.5rem
  & + .#{$uiName}-media
    border-top: 1px solid rgba($border, 0.5)
    margin-top: 1rem
    padding-top: 1rem
  // Sizes
  &.is-large
    & + .#{$uiName}-media
      margin-top: 1.5rem
      padding-top: 1.5rem

.#{$uiName}-media-left,
.#{$uiName}-media-right
  flex-basis: auto
  flex-grow: 0
  flex-shrink: 0

.#{$uiName}-media-left
  margin-right: 1rem

.#{$uiName}-media-right
  margin-left: 1rem

.#{$uiName}-media-content
  flex-basis: auto
  flex-grow: 1
  flex-shrink: 1
  text-align: left

+mobile
  .#{$uiName}-media-content
    overflow-x: auto