.note-detail-file .note-detail-image-link {
  position: relative;
  display: inline-block;
  width: 84%;
  max-width: 100%;
  vertical-align: top;
  border-radius: 6px;
  transition: transform .25s ease;
}

.note-detail-file .note-detail-image-link--original {
  width: auto;
}

.note-detail-file .note-detail-image-link img {
  display: block;
  width: 100%;
  transition: filter .25s ease;
}

.note-detail-file .note-detail-image-link--original img {
  width: auto;
}

.note-detail-image-link__mark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  color: #fff;
  background: rgba(34, 53, 73, .88);
  box-shadow: 0 3px 12px rgba(22, 34, 48, .2);
  pointer-events: none;
  transition: background-color .25s ease;
}

.note-detail-image-link__mark svg {
  width: 19px;
  height: 19px;
}

.note-detail-file .note-detail-image-link:hover,
.note-detail-file .note-detail-image-link:focus-visible {
  transform: translateY(-3px);
}

.note-detail-file .note-detail-image-link:hover img,
.note-detail-file .note-detail-image-link:focus-visible img {
  filter: brightness(.94);
}

.note-detail-file .note-detail-image-link:hover .note-detail-image-link__mark,
.note-detail-file .note-detail-image-link:focus-visible .note-detail-image-link__mark {
  background: #b8587a;
}

.note-detail-file .note-detail-image-link:focus-visible {
  outline: 3px solid #b8587a;
  outline-offset: 4px;
}

@media (max-width: 860px) {
  .note-detail-file .note-detail-image-link:not(.note-detail-image-link--original) {
    width: 100%;
  }

  .note-detail-image-link__mark {
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-detail-file .note-detail-image-link,
  .note-detail-file .note-detail-image-link img,
  .note-detail-image-link__mark {
    transition: none;
  }

  .note-detail-file .note-detail-image-link:hover,
  .note-detail-file .note-detail-image-link:focus-visible {
    transform: none;
  }
}