#task-completed-section .task-image {
  --task-image-border: 4px;
  display: block;
  border: 0;
  cursor: pointer;
  padding: var(--task-image-border);
  background: linear-gradient(
    155deg,
    #fff 8%,
    #e6f7ff 35%,
    #a4e8f5 70%,
    #b0dfff 100%
  );
}

/* Clip the zooming image inside the frame, with no overlapping masked edges. */
#task-completed-section .task-image-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(24px - var(--task-image-border));
  overflow: hidden;
}

#task-completed-section .task-image:focus-visible {
  outline: 3px solid #0054b4;
  outline-offset: 4px;
}

#task-completed-section .task-image img {
  display: block;
  border-radius: 0;
  will-change: auto;
}

@media (max-width: 767px) {
  #task-completed-section .task-image {
    --task-image-border: 3px;
  }
  #task-completed-section .task-image-inner,
  #task-completed-section .task-image img {
    height: auto;
  }
}