// ==========================================================================
// Media
// ==========================================================================

img {
  max-width: 100%;
  width: auto;
  vertical-align: middle;
}

.media-border {
  border: 1px solid $color-media--border__color;
}

.media-frame {
  max-width: 98%;
  padding: 5px;
  background-color: $color-media--background__color;
  border: 1px solid $color-media--border__color;
}

.media-circle {
  border-radius: 100%;
}

.media-rounded {
  border-radius: 5px;
}

// alignment
.media-left {

  @include breakpoint(s) {
    float: left;
    margin-right: 1.5em;
  }
}

.media-right {

  @include breakpoint(s) {
    float: right;
    margin-left: 1.5em;
  }
}

.media-center {
  clear: both;
  display: block;
  margin: 0 auto;
}

// width
.media-full {
  width: 100%;
}

.media-half {

  @include breakpoint(s) {
    max-width: 50%;
  }
}

.media-half-to-third {

  @include breakpoint(s) {
    max-width: 50%;
  }

  @include breakpoint(m) {
    max-width: 33.3333%;
  }
}

.media-third {

  @include breakpoint(s) {
    max-width: 33.3333%;
  }
}
