/* Feather only the outer edges; keep the original artwork and its text sharp. */
.credential-hero-flow :is(
  .credential-presentation__artwork,
  .credential-standards__artwork,
  .credential-verification__artwork,
  .credential-skill-taxonomy__artwork,
  .credential-learner-record__artwork,
  .credential-workforce-intelligence__artwork
) > img,
.credential-hero-flow .credential-institution-outcomes__artwork > img {
  --artwork-edge-fade: 4.5%;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--artwork-edge-fade), #000 calc(100% - var(--artwork-edge-fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--artwork-edge-fade), #000 calc(100% - var(--artwork-edge-fade)), transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 var(--artwork-edge-fade), #000 calc(100% - var(--artwork-edge-fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--artwork-edge-fade), #000 calc(100% - var(--artwork-edge-fade)), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}