decko-commons/decko

//images

@mixin image-box-size($sizename, $sidelength) {
  &.#{$sizename} {
    width: $sidelength;
    height: $sidelength;
    min-width: $sidelength;
    min-height: $sidelength;
    i {
      font-size: $sidelength / 2;
    }
  }
}

.image-box {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 94px;
  height: 94px;
  min-width: 94px;
  min-height: 94px;

  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;

  border: 1px solid #eee;
  border-radius: 0;

  background-color: $gray-100;

  margin-right: 0.5rem;
  overflow: hidden;

  //text-align: center;
  @include image-box-size(icon, 16px);
  @include image-box-size(small, 40px);
  @include image-box-size(medium, 64px);
  @include image-box-size(large, 94px);
  @include image-box-size(xlarge, 150px);

  a, i {
    width: 100%;
    text-align: center;
  }
  i {
    color: $text-muted;
  }
  &.icon a {
    line-height: 0;
    height: 8px;
  }
  img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: inline !important;
  }
}

@media (max-width: 1260px) {
  .image-box {
    @include image-box-size(large, 120px);
  }
  .media-body {
    padding: 6px;
  }
}

@include media-breakpoint-down(sm) {
  .image-box {
    @include image-box-size(xlarge, 100px);
    @include image-box-size(large, 80px);
  }
  .media-body {
    padding: 4px;
  }
}

.media {
  display: flex;
}
.media-body {
  .media-heading {
    a {
      color: inherit;
    }
  }
  .media-text {
    clear: both;
  }
}