//
// Image
// --------------------------------------------------

.image {
  width: $grid-unit-x * 8;
  height: $grid-unit-x * 11;
  border-radius: $border-radius-base;
  font-size: $font-size-h2;
  line-height: $grid-unit-x * 11;
  position: relative;
  text-align: center;
  flex: 0 0 auto;

  @include themes(background-color, image-bg);
  @include themes(color, color-new-body-light);

  &-bg {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    border-radius: $border-radius-base;
  }

  &-title {
    font-size: $font-size-small;
    max-width: $grid-unit-x * 8;

    @include text-overflow;
  }
}