Four card feature section solution built using Gridbox

Hi Mostafa Mohi, Your solution is very nice. Two things that I would change as if I was one writing css. I Would not use relative position for .feature-logo. You can position it with padding or margin. I would do something like this to escape overflowing:

.feature-logo {
    margin-left: auto; ---> add
    display: block; ---> add
    /* position: relative; */ ---> delete
    /* top: 20%; */  ---> delete
    /* left: 75%; */ ---> delete
}

And for div I will exclude fixed height. In this case it is not mandatory. But what if in the future you add some extra text. Text and .feature-logo will overflow their div parent if their content height is larger then parent height.

div {
    width: 100%;
    max-width: 400px;
    /* height: 250px; */ ---> delete
    padding: 30px;
    border-radius: 5px;
    box-shadow: 10px 4px 30px var(--shadow-color);
}

That is my brief summary. If you have any more questions feel free to ask. Good luck Mostafa :)