.background-character {
    position: absolute;
    top: 10%;
    right: 0%;
    z-index: -100;
    max-width: 100%;

    img {
        filter: opacity(30%) grayscale(70%);
        clip-path: polygon(90% 0, 30% 10%, 10% 90%, 65% 80%);
        position: relative;
        right: 0;
        width: 100%;
        max-width: 50rem;
        max-height: 70lvh;
    }
}

.foreground-character {
    pointer-events: none;
    position: absolute;
    top: 25vh;
    left: 20vw;
    z-index: 100;
    max-width: 100%;
    @media (max-width: 767px) {
        /* top: 45vh; */
        left: 0
    }

    svg.shard {
        width: 40vw;
        min-width: 20rem;
        height: 40vh;

        polygon {
            fill: var(--glass-color);
            stroke: var(--glass-border-color);
            stroke-width: 0.015rem;
            filter: drop-shadow(0.1rem 0.1rem 0.1rem var(--glass-shadow-color)) opacity(0.1);
        }
    }
}