Hover on bootstrap card overlay

Question

Just created an overlay on hover following a Youtube tutorial - but I adjusted some css to make it responsive.

I'd like to hear hear some reviews or suggestions where I can improve.

#Projects .card {
 position: relative;
 overflow: hidden;
}
#Projects .card:before {
 position: absolute;
 content: '';
 width: 80%;
 height: 220%;
 background:rgba(199, 0, 57, .9);
 top: -50%;
 left: -100%;
 z-index: 1;
 transform: rotate(20deg);
 transform-origin: center top 0;
 transition: .5s;
}
#Projects .card:hover:before {
 left: 10%;
}
#Projects .card .card-text {
 width: 100%;
 padding: 0 20px;
 position: absolute;
 top: -150%;
 color: #fff;
 left: 0;
 z-index: 2;
 transition: .5s;
}
#Projects .card:hover .card-text {
 top: 20%;
}
@media (max-width: 992px) {
 #Projects .card:hover .card-text {
 top: 15%;
 }
 #Projects .card-text a {
 font-size: 11px;
 }
 #Projects .btn {
 padding: 5px 15px;
 }
 #Projects .card-text h3 {
 font-size: 18px;
 }
 #Projects .card-text h5 {
 font-size: 18px;
 }
 
 
}
@media (max-width: 575px) {
 #Projects .btn {
 padding: 5px 24px;
 font-size: 1.1rem;
 }
 #Projects .card-text h3 {
 font-size: 1.5rem;
 }
 #Projects .card-text h5 {
 font-size: 1.5rem;
 }
 
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
 integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<section id="Projects">
 <div class="container">
 <div class="row">
 <div class="col-md-6 col-sm-6">
 <div class="card">
 <img class="card-img-top img-fluid" src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png" alt="Card image cap">
 <div class="card-text">
 <h3>Project 1</h3>
 <h5>Some text...</h5>
 <a class="btn btn-primary" href="">View</a>
 </div>
 </div>
 </div>
 <div class="col-md-6 col-sm-6">
 <div class="card">
 <img class="card-img-top img-fluid" src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png" alt="Card image cap">
 <div class="card-text">
 <h3>Project 2</h3>
 <h5>Some text...</h5>
 <a class="btn btn-primary" href="">View</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>

Answer 1

In large projects is important to save as much space as possible. Your selectors are way to specific for example :

#Projects .card .card-text {}

Whereas this will do:

.card-text {}

If the purpose of this was a different card-text in a different card you can add another class to card-text as a modifier