How to bring text on the card? - html

Question

<div class="row">
<div class="col-lg-12">
<div class="dev-container">
<p> Venkat </p>
</div>
</div>
</div>
</section>
#dev {
background-color: black;
padding: 7% 15%;
text-align: center;
}
.dev-container {
display:grid;
place-items: center;
position: relative;
height: 150px;
width: 100%;
background: #191919;
border-radius: 10px;
overflow:hidden;
}
.dev-container::before{
content: '';
width: 100%;
height: 300px;
left: 10px;
top: 70px;
position:absolute;
background: linear-gradient(#00e5ff, #b400fb, #ff0000, #ffbf00, #80ff00, #00ffbf, #0080ff, #ff00ff);
animation: animate 5s linear infinite;
}
#keyframes animate{
0% { transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
.dev-container::after{
content: '';
position: absolute;
padding: 50px 50px;
text-decoration: none;
color: #FFE816;
font-size: 2em;
text-transform: uppercase;
font-family: Poppins;
letter-spacing: 4px;
background: #191919;
inset: 3px;
border-radius: 5px;
}
I want my text in the Html to visible on the card but i can't give over-flow as visible because gradient animation is also visible, so is there any way to make my text visible on the card also make the card responsible to the screen size.
I tried to give bootstrap class d-sm-none but after giving the class it disappears even in the large devices.