:root {
    --photo-mask-shape: polygon(25% 0, 0 9.92%, 0 100%, 100% 100%, 100% 12.7%);
    --photo-mask-shape-flip: polygon(75% 0, 100% 9.92%, 100% 100%, 0 100%, 0 12.7%);
    --photo-mask-shape-video: polygon(0 0, 89.75% 0, 100% 24.59%, 86.96% 100%, 0 100%);
    --photo-mask-shape-video-flip: polygon(100% 0, 10.25% 0, 0 24.59%, 13.04% 100%, 100% 100%);
    --photo-mask-shape-rot180: polygon(0 0, 100% 0, 100% 90.08%, 75% 100%, 0 87.3%);
    --photo-mask-shape-flip-y: polygon(0 0, 100% 0, 100% 87.3%, 25% 100%, 0 90.08%);
    --photo-mask-shape-apex-left: polygon(9.92% 0, 100% 0, 100% 100%, 12.7% 100%, 0 25%);
    --photo-mask-shape-apex-right: polygon(0 0, 87.3% 0, 100% 75%, 90.08% 100%, 0 100%);
    --photo-mask-shape-skos: polygon(9.855% 0, 100% 0, 90.145% 100%, 0 100%);
    --photo-shade-offset: var(--space-20);
    --photo-shade-color: var(--color-grey-olive-200);
}

.photo-mask {
    clip-path: var(--photo-mask-shape);
}

.photo-mask--flip {
    clip-path: var(--photo-mask-shape-flip);
}

.photo-mask-shade {
    position: relative;
}

.photo-mask-shade::before {
    content: "";
    position: absolute;
    inset: var(--photo-shade-offset)
        calc(-1 * var(--photo-shade-offset))
        calc(-1 * var(--photo-shade-offset))
        var(--photo-shade-offset);
    background: var(--photo-shade-color);
    clip-path: var(--photo-mask-shape);
    pointer-events: none;
}

.photo-mask-shade>* {
    position: relative;
}

.photo-mask--video {
    clip-path: var(--photo-mask-shape-video);
}

.photo-mask--rot180 {
    clip-path: var(--photo-mask-shape-rot180);
}

.photo-mask-shade--rot180::before {
    clip-path: var(--photo-mask-shape-rot180);
}

.photo-mask--flip-y {
    clip-path: var(--photo-mask-shape-flip-y);
}

.photo-mask-shade--flip-y::before {
    clip-path: var(--photo-mask-shape-flip-y);
}

.photo-mask--apex-left {
    clip-path: var(--photo-mask-shape-apex-left);
}

.photo-mask-shade--apex-left::before {
    clip-path: var(--photo-mask-shape-apex-left);
}

.photo-mask--apex-right {
    clip-path: var(--photo-mask-shape-apex-right);
}

.photo-mask-shade--apex-right::before {
    clip-path: var(--photo-mask-shape-apex-right);
}

.photo-mask-shade--video::before {
    clip-path: var(--photo-mask-shape-video);
}

.photo-mask--video-flip {
    clip-path: var(--photo-mask-shape-video-flip);
}

.photo-mask-shade--video-flip::before {
    clip-path: var(--photo-mask-shape-video-flip);
}

.photo-mask-shade--flip::before {
    inset: var(--photo-shade-offset)
        var(--photo-shade-offset)
        calc(-1 * var(--photo-shade-offset))
        calc(-1 * var(--photo-shade-offset));
    clip-path: var(--photo-mask-shape-flip);
}

.box-shade {
    box-shadow: var(--photo-shade-offset) var(--photo-shade-offset) 0 0 var(--photo-shade-color);
}

@media (max-width: 991px) {
    .box-shade {
        --photo-shade-offset: var(--space-12);
    }
}