/* Variables */
/* Typography */
/* Layout */
@media (max-width: 767px) {
  .main {
    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(5, auto);
    grid-column-gap: 0px;
    grid-row-gap: 2rem;
    justify-items: center;
  }
  .title {
    grid-area: 1/1/2/2;
    max-width: 30rem;
  }
  .supervisor {
    grid-area: 2/1/3/2;
    width: 19.625rem;
  }
  .team {
    grid-area: 3/1/4/2;
    width: 19.625rem;
  }
  .karma {
    grid-area: 4/1/5/2;
    width: 19.625rem;
  }
  .calculator {
    grid-area: 5/1/6/2;
    width: 19.625rem;
  }
}
.title {
  margin-top: 3.75rem;
}

.card-feature {
  background-color: hsl(0, 0%, 100%);
  padding: 2rem;
  border: 0 solid;
  border-radius: 0.4rem;
  border-top-width: 0.25rem;
  box-shadow: 0px 0.25rem 1.4rem 0px var(--bs-gray);
}
.card-feature h2 {
  font-size: 1.2rem;
  font-weight: 600;
}
.card-feature p {
  font-size: 0.8rem;
  color: hsl(212, 6%, 44%);
}
.card-feature img {
  float: right;
}

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

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

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

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

@media (min-width: 768px) and (max-width: 1199px) {
  .main {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(6, auto);
    grid-column-gap: 1rem;
    grid-row-gap: 2rem;
    justify-items: center;
    justify-content: center;
  }
  .title {
    grid-area: 1/2/2/6;
    max-width: 30rem;
  }
  .title p {
    font-size: 1rem;
  }
  .card-feature p {
    font-size: 1rem;
  }
  .supervisor {
    grid-area: 2/1/4/4;
    width: 21rem;
  }
  .team {
    grid-area: 4/1/6/4;
    width: 21rem;
  }
  .karma {
    grid-area: 3/4/5/7;
    width: 21rem;
    position: relative;
    top: -5rem;
  }
  .calculator {
    grid-area: 5/4/7/7;
    width: 21rem;
    position: relative;
    top: -5rem;
  }
}
@media (min-width: 1200px) {
  .main {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(5, auto);
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    justify-content: center;
    justify-items: center;
  }
  .title {
    grid-area: 1/2/2/6;
    max-width: 36rem;
  }
  .title h1 {
    font-size: 2.6rem !important;
  }
  .title p {
    font-size: 1.2rem;
  }
  .card-feature h2 {
    font-size: 1.4rem;
  }
  .card-feature p {
    font-size: 1rem;
  }
  .supervisor {
    grid-area: 3/1/5/3;
    width: 23.2rem;
  }
  .team {
    grid-area: 2/3/4/5;
    width: 23.2rem;
  }
  .karma {
    grid-area: 4/3/6/5;
    width: 23.2rem;
  }
  .calculator {
    grid-area: 3/5/5/7;
    width: 23.2rem;
  }
}