#main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

$width: 400px;
$height: 300px;
.card-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $width;
    height: $height;
    box-sizing: border-box;

    $padding: 15px;
    $shadow: 3px;
    .card {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 
                0 2px 10px 0 rgba(0, 0, 0, 0.12);
        width: $width - 2 * $padding - 2 * $shadow;
        height: $height - 2 * $padding - 2 * $shadow;
        box-sizing: content-box;
        border-radius: 7px;
        cursor: pointer;
        padding: $padding;
        transition: padding ease-in-out 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:hover {
            padding: $padding / 5;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 
                        0 2px 10px 0 rgba(0, 0, 0, 0.22);
        }  

    }
    
}