.container {
    position: relative;
}

.innerGlowContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.wideGlow {
    width: 100%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0));
    background: radial-gradient(rgba(255, 255, 255, 0.2) 0%, transparent 50%);
}

.centerGlow {
    left: 0%;
    // width: 40%;
    // height: 220%;
    // top: -60%;
    // margin-left: -20%;
    // background: linear-gradient(90deg, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0));
    // background: radial-gradient(rgba(255, 255, 255, 0.05) 0%, transparent 50%);

    background: radial-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 10%, transparent 90%);
    top: -10%;
    margin-left: -7%;
    height: 120%;
    width: 14%;
}

.wideGlow,
.centerGlow {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: 200ms;
    transform-origin: 0 0;

    // mix-blend-mode: overlay;

    .container:hover & {
        opacity: 1;
    }

    .container:active & {
        opacity: 0;
    }
}
