four cards feature section solution html&css

You were able to keep the code shorter by just using border-top. HTML

<div class="card border-blue">
            <h2>Calculator</h2>
            <p>Uses data from past projects to provide better delivery estimates</p>
            <img src="images/icon-calculator.svg" alt="">
</div>

CSS

.card{
    box-shadow: 0px 15px 17px 0px rgba(0,0,0,0.59);
    padding: 2rem;
    border-top: 4px solid;
    border-radius: 0.5rem;
}
.border-blue{
    border-color: var(--clr-primary-blue);
}

Like this