*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --header-color: hsl(218, 44%, 22%);
    --text-color: hsl(216, 15%, 48%);
    --background-color: hsl(212, 45%, 89%);
}
body{
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
}


.card-container{
  width: 100%;
  color:inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container .card{
width: 300px ;
margin:40px auto;
background-color: white;
padding: 15px;
border-radius: 10px;
}
.card-container .card .img{
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.card-container .card  .card-body{
    margin-inline-start: 10px;
    text-align: center;
    padding: 10px ;
}
.card-container .card  .card-body h2{
    color: var(--header-color);
    font-weight: bold;
    font-size: 1.3rem;
    margin:8px 0;
}
.card-container .card  .card-body p{
    color: var(--text-color);
    margin-top:4px ;

}