@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins: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&family=Young+Serif&display=swap');

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html{
  min-width: 375px;
  max-width: 1440px;
  margin: auto;
}

body{
  background-color: hsl(0, 0%, 98%);
  font-family: "Poppins", serif;
  width: 90%;
  min-height: 100vh ;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  margin: auto;

}


header{
  text-align: center;
}

header h1{
  color: hsl(229, 6%, 66%);
  font-weight: 400;
  font-size: 1.5rem;
}

header .sec-title{
  color: hsl(234, 12%, 34%);
  font-weight: 700;
}

header p {
  color: hsl(229, 6%, 66%);
  font-weight: 200;
  margin: auto;
  font-size: 1em;
}



.cards{
  margin-top: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.card{
  background-color: white;
  width: 20em;
  height: 13.5em;
  padding: 1.5em;
  margin: 1.5em 1em;
  border-top: 5px solid hsl(180, 62%, 55%);
  box-shadow: 0 0.5em 1em rgba(0, 0,0, 0.185) ;
  border-radius: 5px;
}

.super{
  border-top-color:hsl(180, 62%, 55%) ;
}

.card h1{
  color: hsl(234, 12%, 34%);
  font-weight: 500;
  font-size: 1.7em;
}

.card p{
  color: hsl(229, 6%, 66%);
  font-weight: 200;
}

.card p::after{
  display: block;
  text-align: end;
  padding: 1em 0em;
}


.super p::after{
  content: url(./images/icon-supervisor.svg);
}


.team p::after{
  content: url(./images/icon-team-builder.svg);
}


.karma p::after{
  content: url(./images/icon-karma.svg);
}

.calc p::after{
  content: url(./images/icon-calculator.svg);
}


.team{
  border-top-color:hsl(0, 78%, 62%) ;
}

.karma{
  border-top-color:hsl(34, 97%, 64%);
}

.calc{
  border-top-color:hsl(212, 86%, 64%) ;
}


@media screen  and (min-width:992px){
  .cards{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 0em;
  }
  .card{
    height: 15em;
    align-self: center;
  }
  .super{
    grid-column: 1/2;
    grid-row: 1/3;
  }
  
  .karma{
    grid-column: 2/3;
    grid-row: 2/3;
  }
  .calc{
    grid-row: 1/3;
  }
}