Sadece çerçeve görüntüsü kalmasını sağlamak için ::after pseudo-element'ini, iç kısmı şeffaf olacak şekilde ayarlayabilirsin ve sadece kenarların görünmesini sağlayabilirsin.
Alıntı
#Step .bg-orange-box::after {
position: absolute;
top: -3px; /* Çerçeve kartın dışından başlasın */
bottom: -3px;
left: -3px;
right: -3px;
content: "";
z-index: -1; /* Kartın içeriğinin altında kalsın */
border-radius: 10px; /* Kart ile aynı border-radius */
background: linear-gradient(71deg, #0d1212, #f33518, #0d1212); /* Gradient arka plan */
padding: 1px; /* Çerçeve efekti için padding ekle */
box-sizing: border-box;
background-clip: padding-box; /* Arka planı sadece çerçeve kısmına kısıtla */
transition: opacity 0.3s ease; /* Hover efekti için geçiş */
opacity: 0; /* Başlangıçta görünmez yap */
}

#Step .bg-orange-box:hover::after {
opacity: 1; /* Hover olunca çerçeveyi göster */
}
background-clip: padding-box; özelliği, gradient'in sadece çerçeve alanında görünmesini sağlar.
opacity başlangıçta 0 yapılarak çerçeve gizlenir, hover olunca 1 yapılarak görünür hale getirilir.
padding: 1px; çerçeve efekti vermek için kullanılır, böylece ortadaki içerik şeffaf kalır.
Bu şekilde, kartın üzerine geldiğinde sadece çerçeve olarak gradient görünecek, kartın tamamı gradient ile dolmayacaktır.

Alıntılanan yere eklediğim kodu deneyebilirsiniz.