@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import '../../themes/common-variables.scss';
@import '../../themes/media-queries.scss';
@import '../../themes/font-mixins.scss';

// mobile
.image-box {
  position: relative;
}

.img-absolute {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transition: opacity 1s linear;
}

.img-placeholder-outer {
  @extend .img-absolute;
  overflow: hidden;
}

.img-placeholder {
  filter: blur(50px);
}

.img-description {
}

// tablet
@include mq($min-width: $screen-sm-min, $max-width: $screen-sm-max) {
  .img-description {
    max-width: $tablet-small-width;
  }
}

// desktop. wait for spec
@include mq($min-width: $screen-md-min) {
  .img-description {
    max-width: $desktop-small-width;
  }
}