*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 15px;
  color: hsl(234, 12%, 34%);
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.features {
  width: 100%;
  padding: 1.5rem;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .features {
    gap: 5rem;
    width: 90%;
  }
}
.features__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.features__title {
  color: hsl(212, 6%, 44%);
  font-size: 24px;
  font-weight: 200;
}
@media (min-width: 48rem) {
  .features__title {
    font-size: 40px;
  }
}
.features__subtitle {
  font-size: 24px;
  font-weight: 600;
}
@media (min-width: 48rem) {
  .features__subtitle {
    gap: 5rem;
    font-size: 40px;
  }
}
.features__description {
  width: 90%;
  max-width: 600px;
  margin-top: 0.8rem;
}
@media (min-width: 48rem) {
  .features__description {
    max-width: 700px;
    font-size: 18px;
  }
}
.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "supervisor builder calculator" "supervisor karma calculator";
  }
}

.card {
  width: 100%;
  max-width: 320px;
  height: 260px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}
@media (min-width: 48rem) {
  .card {
    max-width: 380px;
  }
}
.card__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: hsl(234, 12%, 34%);
}
@media (min-width: 48rem) {
  .card__title {
    font-size: 1.5rem;
  }
}
.card__description {
  color: hsl(212, 6%, 44%);
}
.card--supervisor {
  border-top: 6px solid hsl(180, 62%, 55%);
}
@media (min-width: 48rem) {
  .card--supervisor {
    grid-area: supervisor;
    align-self: center;
  }
}
.card--team-builder {
  border-top: 6px solid hsl(0, 78%, 62%);
}
@media (min-width: 48rem) {
  .card--team-builder {
    grid-area: builder;
  }
}
.card--karma {
  border-top: 6px solid hsl(34, 97%, 64%);
}
@media (min-width: 48rem) {
  .card--karma {
    grid-area: karma;
  }
}
.card--calculator {
  border-top: 6px solid hsl(212, 86%, 64%);
}
@media (min-width: 48rem) {
  .card--calculator {
    grid-area: calculator;
    align-self: center;
  }
}
.card__icon {
  margin-top: 1.2rem;
  align-self: end;
}/*# sourceMappingURL=style.css.map */