:root {
    --color-body-background: #999999;
}

body {
    margin: 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: var(--color-body-background);
}

div.wrapper {
    --width: 32rem;
    width: var(--width);
    /*height: ;*/

    margin: 3rem 3rem;

    position: relative;
}

div.wrapper > div.polygon {
    position: absolute;
    width: 100%;
    height: 100%;

    /*background-color: */;
    filter: none;
    transition: filter 0.4s;
    /*clip-path: ;*/
}

div.wrapper > div.polygon:hover {
    /*filter: invert(80%);*/
    filter: sepia(100%);
}

@media (hover: none) {
    div.polygon:hover {
        filter: inherit !important;
    }
}