.cp-fx { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #0f1011; }
.cp-fx > video,
.cp-fx > picture,
.cp-fx > picture > img,
.cp-fx > .cp-fx-gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-fx > video { z-index: 0; margin: 0; }
.cp-fx > .cp-fx-gl { z-index: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }

.cp-fx--on > .cp-fx-gl { opacity: 1; }
.cp-fx--on > video,
.cp-fx--on > picture { opacity: 0; }
.cp-fx > .overlay { z-index: 1; }

.cp-fx--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 10, .62) 0%, rgba(8, 12, 10, .34) 38%, rgba(8, 12, 10, .2) 62%, rgba(15, 16, 17, .55) 100%); }