*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.attribution{
    top:0;
    left:0;
    position: absolute;
    opacity: .4;
}

body{
    color: white;
   font-size: 15px;
   font-family: Inter,sans-serif;
}
p{
    font-family: Lexend Deca,sans-serif;
}
h2{
    font-size: 2.125em;
}
h2 .highlight{
    color:hsl(277, 45%, 50%)
}
h3{
    font-size: 1.5em;
}

.content-container{
    
    
    background-color: rgb(9, 11, 26);
   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 84px 0;
 
}
.card{
    display: flex;
    flex-direction: column-reverse;
   
    width: 77%;

    background-color: rgb(27, 25, 56);
    border-radius: 15px;
}
.img-container{
    position: relative;

}

.img-container img{
border-radius: 15px 15px 0 0;

width: 100%;
height: 100%;

}
.overlay{
    border-radius: 0px 15px 15px 0;

    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: 
    rgba(170, 92, 219,.3);
}
.text-wrapper{
    padding:40px 32px ;
    text-align: center;
  
    display: flex;
    flex-direction: column;
    justify-content:  space-between;
}
.heading-container{
    
     margin-bottom: 3.25em;
 
 }
 .heading-container h2{
     margin-bottom: 1.25rem;
 }
.stat-container{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.stat-container span{
    margin-bottom: 1.25rem;}



@media screen and (min-width:501px) {

.content-container{
    height: 100vh;
   
    
       
}
    .card{
    flex-direction: row;
    border-radius: 15px ;
    
}
.text-wrapper{
    flex-basis:100%; 
    padding: 5.75% 6% 3.25% 6%;

}
.heading-container{

    display: flex;
    flex-direction: column;
    justify-content: space-around;

}

.stat-container{
    flex-direction: row;
}

.img-container{
    flex-basis: 100%;

}
.img-container img{
    border-radius: 0px 15px 15px 0;

}



}