.main {
   padding: 69px 30px 50px 0px;
   background-color: #F2F2F2;
   display: flex;
   flex-direction: column;
}

.core {
   margin: auto;
   max-width: 381px;
   width: 100%;
}
.core>p{
   max-width: 357px;
   font-size: 14.4px;
   max-height: 133px;
}

.content {
   max-width: 1120px;
   width: 100%;
   margin: auto;
   display: grid;
   column-gap: 32px;
   grid-template-columns: repeat(2,auto);
}

.up {
   display: flex;
}

.up h1 {
   font-size: 2.2em;
   font-weight: 500;
}

.core p {
   line-height: 2;
   font-size: 0.9em;
}

.up img {
   margin-top: 15px;
   margin-left: 10px;
}

.card {
   display: grid;
   grid-template-columns: repeat(2, auto);
   column-gap: 30px;
   row-gap: 30px;
   column-gap: 40px;
   margin: 69px auto;
}

.card img {
   display: block;
   margin: 0 auto;
   width: 20%;
}
.card >div{
   max-width: 341px;
}

.card1 {
   background: rgb(254, 122, 101);
   border-radius: 20px;
   border: 1px solid white;
   
   
  
  
 }
 
 .card1 p{
   color: white;
   font-size: 12.8px;
   text-align: start;
   line-height: 2;
   
 }
 .card2{
  background-color:rgb(0, 174, 255);
  border-radius: 20px;
   border: 1px solid white;
   height: 300px;
   width: 100%;
   padding: 13px 20px 20px 20px;
}

.card2 p {
   color: white;
   font-size: 12.8px;
   text-align: start;
   line-height: 2;
}

.card3 {
   background: rgb(255, 187, 52);
   border-radius: 20px;
   border: 1px solid white;
   height: 300px;
   width: 100%;
   padding: 13px 20px 20px 20px;


}

.card3 p {
   color: white;
   font-size: 12.8px;
   text-align: start;
   line-height: 2;
   max-width: 462px;
}

.card4 {
   background: rgb(254, 122, 101);
   border-radius: 20px;
   border: 1px solid white;
   height: 300px;
   width: 100%;
   padding: 13px 20px 20px 20px;
}

.card4 p {
   color: white;
   font-size: 14px;
   text-align: start;
   line-height: 2;
 }
 
  
 @media (min-width:961px) and (max-width:1260px) {
  .content{
   display: flex;
   justify-content: center;
   max-width: 1260px;
  } 
  .card{
   display: grid;
   grid-template-columns: 1fr;
  }
  
  .card p{
   font-size: 0.8rem;
  }
  
   
}
 
 
 @media (min-width:600px) and (max-width: 960px){
  .main{
   max-width: 1200px;
  }
   .content{
      max-width: 967px;
      display: block;

   }
   .card{
   
    grid-template-columns: repeat(2,40vw);
    justify-content: center;
   }


   .card p {
      font-size: 0.9rem;

   }

   .core {
      font-size: 14px;
      margin-top: 20px;

   }
}

@media (min-width:240px) and (max-width:599px) {
   .content {
      display: block;

   }
   .up >h1{
      margin-left: 20px;
   }
   .content p{
      margin-left: 20px;
   }
   .card{
      grid-template-columns: 90vw;
      max-width:  100%;
      justify-content: center;


   }
  
  
      
   
   .core{
      font-size: 14px;
   }

}