:root {
	--opacity: var(--img-fg-o);
	--filter: saturate(var(--img-fg-sat)) sepia(var(--img-fg-sep)) brightness(var(--img-fg-brt)) contrast(var(--img-fg-con)) blur(var(--img-fg-blr));
}

picture img {
	opacity: var(--opacity);
    filter: var(--filter);
}

.bg-image,
.ovrly {
	--opacity: var(--img-bg-o);
	--filter: saturate(var(--img-bg-sat)) sepia(var(--img-bg-sep)) brightness(var(--img-bg-brt)) contrast(var(--img-bg-con)) blur(var(--img-bg-blr));
}

.mstg-tls {
    --opacity: var(--mstg-img-fg-o);
    --filter: saturate(var(--mstg-img-fg-sat)) sepia(var(--mstg-img-fg-sep)) brightness(var(--mstg-img-fg-brt)) contrast(var(--mstg-img-fg-con)) blur(var(--mstg-img-fg-blr));
	
	&.bg-image,
	.ovrly {
	    --opacity: var(--mstg-img-bg-o);
	    --filter: saturate(var(--mstg-img-bg-sat)) sepia(var(--mstg-img-bg-sep)) brightness(var(--mstg-img-bg-brt)) contrast(var(--mstg-img-bg-con)) blur(var(--mstg-img-bg-blr));
	}
	
}

.bnr-tls {
    --opacity: var(--bnr-img-fg-o);
    --filter: saturate(var(--bnr-img-fg-sat)) sepia(var(--bnr-img-fg-sep)) brightness(var(--bnr-img-fg-brt)) contrast(var(--bnr-img-fg-con)) blur(var(--bnr-img-fg-blr));
	
	&.bg-image,
	.ovrly {
	    --opacity: var(--bnr-img-bg-o);
	    --filter: saturate(var(--bnr-img-bg-sat)) sepia(var(--bnr-img-bg-sep)) brightness(var(--bnr-img-bg-brt)) contrast(var(--bnr-img-bg-con)) blur(var(--bnr-img-bg-blr));
	}
}

li picture:not(.ovrly) img,
.bg-image picture:not(.bg) img { 
	opacity: 1 !important;
	filter: none !important;
}

section:has(picture.wtr-mrk img) {
	--wtr-mrk-tp: 20%; /* { min: -50, max: 50, step: 1, type: 'range', friendly: 'Watermark Top Position', group: 'Images' } */
	--wtr-mrk-lt: 0%; /* { min: -30, max: 30, step: 1, type: 'range', friendly: 'Watermark Left Position', group: 'Images' } */
	--wtr-mrk-w: 40%; /* { min: 0, max: 100, step: 1, type: 'range', friendly: 'Watermark Width', group: 'Images' } */
	--wtr-mrk-o: 1; /* { min: 0, max: 100, step: 1, type: 'range', friendly: 'Watermark Opacity', group: 'Images' } */
	
	picture.wtr-mrk {
			
		> img {
			position: absolute;
			top: var(--wtr-mrk-tp);
			left: var(--wtr-mrk-lt);
			opacity: var(--wtr-mrk-o);
			max-width: var(--wtr-mrk-w);
			height: max-content;
			transform: none;
		}
	}
	
	&.f_rev {
		picture.wtr-mrk img {
			left: auto;
			right: var(--wtr-mrk-lt);
		}
	}
}