*{
    box-sizing: border-box;
    font-family: 'Outfit';
    /*15px*/
    font-size: 0.9375rem;
}

/*optimal positional alignment of elements in the body*/
body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(212, 45%, 89%);
    margin:0;
}

/*Card*/
.card{
    display: flex;
    flex-direction: column;
    /*288px*/
    width:18rem;
    /*528px*/
    height: 31rem;
    background-color: white;
    border-radius: 20px;
    align-items: center;

    @media (width >= 40rem){
        /*336px*/
        width:21rem;
        /*576px*/
        height: 36rem;
    }
}

/*Image*/
.img{
    margin: 20px;
    border-radius: 15px;
    /*200px*/
    width:15.625rem;
    

    /*640px*/
    @media (width >= 40rem){
        /*300px*/
        width:18.75rem;
    }
}

/*Content container that has the title and content*/
.content_container{
    text-align: center;
    /*250px*/
    width: 15.625rem;

    @media (width>= 40rem){
        /*300px*/
        width: 18.75rem;
    }
}

.content_container > .title{
    /*24px*/
    font-size: 1.5rem;
    font-weight: 700;
    color:hsl(218, 44%, 22%);
    margin: 5px;

    @media(width >= 40rem){
        /*28.8px*/
        font-size: 1.8rem;
    }
}

.content_container > .content{
    font-weight: 400;
    color: hsl(216, 15%, 48%);
    padding: 0px 8px;

    @media (width>=40rem){
        /*16px*/
        font-size: 1rem;
        padding: 0px 13px;
    }
}

/* 1 rem = 16px
    to calculate rem: 16px / 16 = 1 rem
*/