.art-direction {
    position: relative;
    display: block;
    --progress: 1.3
}
.art-direction.effect {
    --progress: -.3
}

.art-direction img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-mask: radial-gradient(circle at 0% 0%,#000000 calc(var(--progress) * 100%),transparent calc(var(--progress) * 100% + 30%));
    mask: radial-gradient(circle at 0% 0%,#000000 calc(var(--progress) * 100%),transparent calc(var(--progress) * 100% + 30%))
}
.art-direction img.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: brightness(150%);
    -webkit-mask: radial-gradient(circle at 0% 0%,transparent calc(var(--progress) * 100% - 30%),#000000 calc(var(--progress) * 100%),transparent calc(var(--progress) * 100% + 30%));
    mask: radial-gradient(circle at 0% 0%,transparent calc(var(--progress) * 100% - 30%),#000000 calc(var(--progress) * 100%),transparent calc(var(--progress) * 100% + 30%))
}