.mask-fade-x {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem, rgba(0, 0, 0, 1) calc(100% - 3rem), rgba(0, 0, 0, 0) calc(100% - 1rem));
}

.mask-fade-r {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) calc(100% - 3rem), rgba(0, 0, 0, 0) calc(100% - 1rem));
}

.mask-fade-y {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) calc(100% - 2.5rem), rgba(0, 0, 0, 0) 100%);
}

.mask-fade-frames {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) calc(100% - 4rem), rgba(0, 0, 0, 0) 100%);
}