*{
 box-sizing: border-box;
    margin: 0px;
    font-family: system-ui;
}

body{
        background-color: #b3e5fc59;
}
.parent{
    background-color: white;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    margin: 70px auto;
    /* width: 40%; */
    width: 600px;
    /* height: 60vh; */
    height: 350px;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 50% 50%;
    grid-template-areas: 
    "des des des des"
    "sign sign just just" ;
}
.description{
    grid-area: des;
    background-color: white;
    margin: 0px 10px;
    

}
.description h3{
    
       color: #26A69A;
       margin: 15px;
}
.description h4{
        color: #C0CA33;
        margin: 10px;
        /* margin: 10px 0px; */

}
.description p{
    margin:  0px 10px;
}
.sign-up{
    grid-area: sign;
     background-color: #4DB6AC;
     color: white;
     position: relative;
     /* display: flex;
     flex-direction: column;
     justify-content: center; */
     
   

}
.sign-up h4{
    margin: 10px;
    margin-left: 20px;
}
.sign-up p{
height: 30px;
margin: 10px;
margin-left: 20px;
    
}
.sign-up .special{
    color: #ffffffa6;
}
.sign-up span{
    font-size: 27px;
    font-weight: bold;
    color: white;
  


}
.sign-up a{
 text-decoration: none;
    background-color: #C0CA33;
    color: white;
    width: 75%;
    height: 35px;
    display: block;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 10%;
    left: 13%;
   

}
.justification{
    grid-area: just;
       background-color: #80CBC4;
}
.justification h4{
    margin: 10px;
    margin-left: 20px;
    color: white;
}
.justification pre{
    color: #ffffffa6;
    line-height: 1.2;
    font-size: 14px;
}
@media (max-width: 500px){
    .parent{
        /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
        /* grid-template-columns: repeat(auto-fill, 300px); */
        /* grid-template-columns: 1fr; */
        max-width: 300px;
        height: 600px;

    grid-template-columns: 100%;
    grid-template-rows: 37% 30% 33%;
    grid-template-areas: 
    "des"
    "sign"
    "just" ;
    }
}
    /* }
    .description{
        grid-row: auto;
        grid-column: auto;
    }
    .sign-up{
            grid-row: auto;
        grid-column: auto;
    }
    .justification{
            grid-row: auto;
        grid-column: auto;
    } */