//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: #f8f9fa;

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;
}

}

@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;
}

}