.about {
    text-align: center;
    font-size: var(--size-2xl);
    padding-top: 2em;
    padding-bottom: 2em;
    color: var(--clr-slate800);
  
}

.about__head{
    font-size:var(--size-4xl) ;
    font-family: 'Bevellier', sans-serif;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-family: 'Panchang', sans-serif;
    padding-bottom: 1em;
}



.card{
    padding: 2rem;
    background-image: url(../images/yessir\ this\ shut.png);
    background-size: cover;
    background-color: rgb(56, 56, 56);
    background-blend-mode: multiply;
    color: aliceblue;
    text-align: center;
    font-size: var(--size-lg);
}
.card__title{
position: relative;
z-index: 1;
display: inline-block;
margin-bottom: 1rem;
text-align: center;
}
.card__title::after{
    content: '';
    position: absolute;
    top: -0.25rem;
    left: -2rem;
    bottom: -0.25rem;
    width: calc(100% + 4rem);
    background: #7a7474;
    z-index: -1;
    transform: scaleX(0.1);
    transform-origin: left;
    transition: transform 250ms ease-in;
}

.card:hover .card__title::after{
    transform: scaleX(1);
}


.card__body{
    position: relative;
    z-index: 1;
color: transparent;
margin: 0;
transition: color 150ms 210ms;
font-size: var(--size-lg);


}


.card__body::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(245, 241, 241);
    z-index: -1;
    transform: scaleY(0);
    transition: transform 250ms ease-in;
    transform-origin: top ;
}

.card:hover .card__body{
    color: black;
}
.card:hover .card__body::after{
transform: scaleY(1);
}

@media (max-width: 768px){
    .about__head{
        font-size:var(--size-3xl) ;
        padding-bottom: 1em;
    }
    .about {
      
        font-size: var(--size-xl);
        
    }
    .card__body{
      
    font-size: var(--size-base);
    
    
    }
    .card{
        font-size: var(--size-base);
    }
}



   
    
  
    

   
      @media (max-width: 420px){
        .about__head{
            font-size:var(--size-2xl) ;
            padding-bottom: 1em;
        }
        .about {
           
            font-size: var(--size-lg);
            
          
        }
        
      }