.sp-card {
 width: 24%;
 padding: 0.5rem;
 margin-right: 0.5rem;
 padding: 1rem 0;
 margin-bottom: 1rem;
}
.sp-card img {
    width: auto;
    height: 11rem;
}
.sub-product-cards {
 display: flex;
 width: 100%;
 flex-wrap: wrap;

}
.sub-products {
 width: 100%;
 padding: 4rem 1rem;
}
p.sp-name {
    font-family: baskervville;
    margin: 0.5rem 0;
    font-size: 17px;
    text-transform: capitalize;
    color: #dee2e6;
    font-weight: 500;
    letter-spacing: 1px;
}
p.size {
 font-family: mulish;
 color: #f8f9fa;
 font-weight: 700;
}
p.desc {
 font-family: mulish;
 font-size: 15px;
 line-height: 20px;
 margin: 2rem 0;
 color: #f8f9fa85;
}
.sp-desc {
 position: relative;
 padding: 1rem;
 /* padding-left: 1rem; */
}
.sp-desc a {
 background: #f8f9fa;
 color: #212529;
 padding: 0.6rem;
 border-radius: 25px;
 font-family: mulish;
 text-decoration: none;
 font-size: 14px;
 transition: all 0.3s ease;
} 

.sp-desc a:hover{
background-color: #212529;
color: #f8f9fa;
border: 1px solid #f8f9fa;
}
.sp-desc::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 5px;
 height: 100%;
 background: #f8f9fa85;
 border-radius: 0 5px 5px 0;
 /* margin-right: -5rem; */
}
.inside-sub-hero {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
 font-family: baskervville;
 font-size: 30px;
 position: relative;
 z-index: 100;
}
.sub-hero {
 height: 60vh;
 background-image: url(../images/category-b.jpg);
 background-size: cover;
 background-position: center;
 color: #fff;
 position: relative;
}
.sub-hero::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
@media (max-width: 1042px){
.sp-card {
 width: 32%;
}
}

@media (max-width: 790px){
.sp-card {
     width: 48%;
 }
}

@media (max-width: 500px){
p.desc {
 text-align: justify;
}
}

@media  (max-width: 465px) {
.sp-card {
     width: 100%;
 }
}