.image {
  position: relative;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
  }

  .image-title,
  .image-icons,
  .bookmark-icon {
    padding-top: $space-small;
    padding-bottom: $space-small;

    transition: transform 0.2s linear;
    position: absolute;
  }

  .image-title {
    padding-left: $space-normal;
    padding-right: $space-normal;
    color: $color-white;
    background-color: $color-black;
    font-size: $font-size-caption;

    transform: translateY(100%);
    left: 0;
    bottom: 0;

    font-weight: 600;

    &.is-ellipsised:not(:hover) {
      white-space: nowrap;

      width: 100%;

      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .image-icons {
    padding-left: $space-normal;
    padding-right: $space-normal;
    color: $color-black;

    transform: translateY(-100%);
    left: 0;
    top: 0;

    font-size: 1.625rem;
  }

  .bookmark-icon {
    padding-left: $space-small;
    padding-right: $space-small;
    color: $color-white;
    background-color: $color-black;

    right: 0;
    top: 0;
    line-height: 1;

    transform: translateY(-100%);
  }

  &:hover {
    .image-title,
    .image-icons,
    .bookmark-icon {
      transform: translateY(0%);
    }
  }

  &.is-compact {
    .image-icons {
      padding: 0;
      padding-left: $space-small;
      padding-right: $space-small;

      font-size: 1.3rem;
    }
  }

  &.is-selected {
    border: 6px solid $color-gold;
  }
}