Cards with Neumorphism and Hover Effect – SCSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 100vh;
    background: #232427;

    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: 40px 0;

        .card{
            position: relative;
            min-width: 320px;
            height: 440px;
            box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2), 
                        inset -5px -5px 15px rgba(255,255,255,0.1),
                        5px 5px 15px rgba(0,0,0,0.3),
                        -5px -5px 15px rgba(255,255,255,0.1);
            border-radius: 15px;
            margin: 30px;
            transition: .5s;

                

            

            &:nth-child(1) .box .content a{
                background: #2196f3;
            }

            &:nth-child(2) .box .content a{
                background: #e91e63;
            }

            &:nth-child(3) .box .content a{
                background: #23c186;
            }

            .box{
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
                background: #2a2b2f;
                border-radius: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                transition: .5s;

                &:hover{
                    transform: translateY(-50px);
                }

                &:before{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 50%;
                    height: 100%;
                    background: rgba(255,255,255,.03);
                }

                .content{
                    padding: 20px;
                    text-align: center;

                    h2{
                        position: absolute;
                        top: -10px;
                        right: 30px;
                        font-size: 8rem;
                        color: rgba(255,255,255,.05);
                    }

                    h3{
                        font-size: 1.8rem;
                        color: rgba(255,255,255,.5);
                        z-index: 1;
                        transition: 0.5s;
                        margin-bottom: 15px;
                    }

                    p{
                        font-size: 1rem;
                        font-weight: 300;
                        color: rgba(255,255,255,.5);
                        z-index: 1;
                        transition: 0.5s;
                    }

                    a{
                        position: relative;
                        display: inline-block;
                        padding: 8px 20px;
                        background: black;
                        border-radius: 20px;
                        text-decoration: none;
                        color: white;
                        margin-top: 20px;
                        box-shadow: 0 10px 20px rgba(0,0,0,.2);
                    }
                }
            }
        }
    }
}