(circle at center,
                    var(--light) 0,
                    rgba(0, 0, 0, 0) 30%) no-repeat;
            opacity: 0;
            transition: opacity 0.5s;
        }

        .card:hover::before,
        .card:focus::before,
        .card:hover::after,
        .card:focus::after,
        .card.active::before,
        .card.active::after {
            opacity: 1;
        }


        .card::after {
            z-index: -1;
            content: "";
            position: absolute;
            inse