.bannerWaterMark ul{--col-gap:2rem;--barH:1rem;--roleH:0rem;--flapH:1rem;width:min(20rem,90%);margin-inline:auto;display:flex;flex-wrap:wrap;gap:var(--col-gap);padding-inline:calc(var(--col-gap) / 2);justify-content:center;align-items:flex-start;list-style:none;position:fixed;z-index:9999;left:-5rem;@media (max-width:850px){left:-8rem}}.bannerWaterMark ul li{grid-template:role
icon
title
descr;align-items:flex-start;gap:1rem;padding-block-end:calc(var(--flapH) + 1rem);text-align:center;background:var(--accent-color);background-image:linear-gradient(rgba(0,0,0,.6) var(--roleH),rgba(0,0,0,.4) calc(var(--roleH) + .5rem),rgba(0,0,0,0) calc(var(--roleH) + .5rem + 5rem));clip-path:polygon(calc(var(--col-gap) / -2 - 5px) 0,calc(100% + var(--col-gap) / 2 + 5px) 0,calc(100% + var(--col-gap) / 2 + 5px) calc(100% - var(--flapH)),50% 100%,calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH)))}.bannerWaterMark ul li::after{content:"";grid-area:role;background:var(--accent-color);background-image:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.2) 30%,rgba(255,255,255,.1) 40%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.4));height:var(--roleH)}.bannerWaterMark ul li .descr{padding-inline:1rem;color:white;text-shadow:0 0 .5rem rgba(0,0,0,.5);font-size:120%}@media (max-width:991px){.bannerWaterMark ul{--col-gap:-1rem;--barH:1rem;--roleH:0rem;--flapH:2rem;width:min(1 0rem,90%)}.bannerWaterMark ul li{}.bannerWaterMark ul li .descr{font-size:70%}}