.active>& {
    &:after {
        width: 300px;
        height: 140px;
        margin: -150x -70px;
    }

    &:before {
        width: 160px;
        height: 180px;
        margin: -80px -90px;
    }
}

& {
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: inherit;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;

    &:after {
        margin: -100px -180px;
        width: 300px;
        height: 200px;
        right: 0;
        bottom: 0;
    }

    &:before {
        width: 60px;
        height: 100px;
        margin: -55px -35px;
        left: 0;
        top: 0;
    }

    &:after,
    &:before {
        content: "";
        background-color: #9cb1;
        position: absolute;
        border-radius: 50%;
        // backdrop-filter: invert(1);
        transition: all .2s;
    }
}