@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
body{
     background-color: hsl(260, 100%, 95%);
}
main{
     padding: 2.5rem 1.5rem;
     font-family: "Barlow Semi Condensed", sans-serif;
    
     display: flex;
     flex-direction: column;
     gap: 2rem;
     max-width: 1200px;
     margin: 0 auto;
}
.card{
     padding: 2rem 2.5rem 2rem 1.5rem;
     border-radius: 6px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     -ms-border-radius: 6px;
     -o-border-radius: 6px;
}
.card{
  
     color: hsl(0, 0%, 100%);
}
.card-img{
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
     width: 30px;
     height: auto;
}
.d1{
     display: flex;
     align-items: center;
     gap:1rem;
     padding-bottom: 1rem;
}
.card-title{
     font-size:0.8rem;
     padding-bottom: 0.15rem;
     font-weight: 300;
}
.card-info{
     font-size: 0.7rem;
     font-weight: 200;
}
.support{
     font-size: 1.1rem;
     font-weight: 600;
     padding-bottom: 1rem;
     line-height: 1.5;
}
.experience{
     font-weight: 200;
     font-size: 0.9rem;
     line-height: 1.5;
}
.card1{
     background-color:hsl(263, 55%, 52%) ;
}
.card2{
     background-color: hsl(217, 19%, 35%);
}
.card3,.card5{
     background-color: hsl(0, 0%, 100%);
     color:hsl(0, 0%, 7%) ;
}
.card3 .experience,.card5 .experience{
     font-weight: 300;
}
.card4{
     background-color: hsl(219, 29%, 14%);
}

@media (min-width:1024px){
     main{
          height: 100vh;
          display: grid;
          grid-template-columns: repeat(4,1fr);
          grid-template-rows: repeat(2,1fr);
          padding: 0.8rem 0 1rem 0;

     }
     .card1{
          grid-column: 1 / span 2;
     }
     .card4{
          grid-area: 2/2/3/4;
     }
     .card3{
          grid-area: 2/1/3/2;
     }
     .card5{
          grid-area:1 /4/3/5;
     }
     .experience{
          font-size:0.8rem
     }
     
}