ul,
ol {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

img {
    display: block;
}
body{
    font-family: "Poppins", sans-serif;
    color: #4d4f62;
    background-color: #Fafafa;
    
}
.container{
    min-width: 320px;
   max-width: 375px;
   padding: 56px 29px; 
   margin: 0 auto;
}
.title-container{
display: flex;
flex-direction: column;

justify-self: center;
text-align: center;
width: 316px;
margin-bottom: 60px;
height: 146px;
}
.title{
font-size: 24px;
margin-bottom: 16px;
font-weight: 600;
text-align: center;
}
.span-title{
    font-size: 24px;
    line-height: 140%;
    font-weight: 200;
    margin-bottom: 16px;
}
.desc{
    font-size: 15px;
    text-align: center;
    font-weight: 400;
}
.container-card{
   width: 316px; 
   display: grid;
   justify-self: center;
}
.card-list{
border-radius: 5px;
padding: 32px;
background-color: white;
margin-bottom: 32px;
max-width: 314px;
box-sizing: border-box;

}
.green{
border-top: 5px solid  hsl(180, 62%, 55%);
}
.red{
border-top: 5px solid hsl(0, 78%, 62%)
}
.yellow{
border-top: 5px solid hsl(34, 97%, 64%)
}
.blue{
border-top: 5px solid hsl(212, 86%, 64%);
}
.title-card{
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 20px;
}
.desc-card{
    font-weight: 200;
    margin-bottom: 32px;
    font-size: 14px;
}
.img-svg{
    display: flex;
    justify-self: end;
}

@media screen and (min-width: 768px){
.container {
        max-width: 768px;
        padding: 80px 54px;
        
    }

    .title-container {
        width: 540px;
        height: 158px;
       margin: 0 auto;
    margin-bottom: 74px;
    }

    .title {
        font-size: 35px;
        margin-bottom: 16px;
    }

    .span-title {
        font-size: 34px;
       

    }

    .desc {
        font-size: 15px;
        text-align: center;
        
    }

    .container-card {
        width: 660px;
       
display: grid;
    grid-template-columns: 1fr  1fr;
    grid-template-rows: auto auto ;
    gap: 32px;
align-items: center;
justify-items: center;
justify-content: center;
margin: 0 auto;

    }
   
.card-list {
    width: 314px;
height: 250px;
box-sizing: border-box;
margin-bottom: 0;
}
  
   .green {
       grid-column: 1/5;
        grid-row: 1;
        justify-self: center;

   }

   .red {
        grid-column:1/3;
            grid-row: 2;
           
   }

   .yelow {
    grid-column: 3/5;
        /* grid-row: 2/4; */
        justify-content: end;
   }

   .blue {
    grid-column: 2/4;
        grid-row: 3;
        justify-self: center;
   } 
   
}

@media screen and (min-width: 1440px){
    .container {
            max-width: 1440px;
            padding: 102px 163px 163px 163px;
    
        }
        .container-card {
            width: 1114px;
            display:grid;
            grid-template-columns:  1fr auto 1fr  ;
grid-template-rows:auto auto;
            gap: 0;
    
        }
        .card-list {
            width: 350px;
        }
                .green {
                grid-column: 1;
                    grid-row: 1/3;
                    /* justify-self: start; */
               
                }
        
                .red {
                    grid-column: 1/4;
                    grid-row: 1/2;
                justify-self: center;
                margin-bottom: 32px;
                }
        
                .yelow {
                    grid-column: 2/3;
                        grid-row: 2/3;
                        justify-self: center;
                        
                }
        
                .blue {
                    grid-column: 3;
                        grid-row: 1/3;
                }
}