@layer components {
    .watermark {
            position: relative;
        }

    .watermark__overlay {
            align-items: center;
            bottom: 0;
            display: flex;
            justify-content: center;
            left: 0;
            pointer-events: none;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 10;
        }

    .watermark__text {
            color: rgb(var(--dashboard-color-negative-rgb) / 0.5);
            font-size: clamp(2rem, 7vw, 3rem);
            font-weight: 800;
            line-height: 1;
            text-transform: uppercase;
            transform: rotate(-45deg);
        }
}