* {
  box-sizing: border-box;
  margin: 0;
  font-family: "Poppins";
  color: var(--Grey-500);
}

:root {
  --Red: hsl(0, 78%, 62%);
  --Cyan: hsl(180, 62%, 55%);
  --Orange: hsl(34, 97%, 64%);
  --Blue: hsl(212, 86%, 64%);
  --Grey-400: hsl(212, 6%, 44%);
  --Grey-500: hsl(234, 12%, 34%);
}

body {
  padding: 24px;
}

main {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 80px auto;
  align-items: center;
  gap: 50px;
}

.title-parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 500px;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.cards-parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: center;
}

.group-of-cards {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 30px;
}

.card {
  padding: 30px 40px 40px 40px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.388);
  border-radius: 8px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  border-top: 5px solid;
}

.team-builder {
    border-color: var(--Red);
}
.supervisor {
    border-color: var(--Cyan);
}
.calculator {
    border-color: blue;
}
.coach {
    border-color: var(--Orange);
}

.card-text-parent {
  flex: 1;
}

.icon-parent {
  flex: 1;
  display: flex;
  align-items: end;
  justify-content: end;
}

.icon {
  width: 100;
  height: 100;
}

.main-title {
    font-size: clamp(1.6rem , 1.8rem + 3vw , 2.1rem);
    font-weight: 200;
}
.main-title strong {
    font-weight: 600;
}
.description {
    color: var(--Grey-400);
    font-weight: 500;
    opacity: 0.9;
    font-size: clamp(0.9rem, 0.85rem + 0.375vw, 1.025rem);
}
.card-title {
    font-size: clamp(1.2rem , 1.4rem + 3vw , 1.6rem);
    margin-bottom: 7px;
}
.card-description {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    color: var(--Grey-400);
}

@media (max-width:885px) {
    .cards-parent {
        grid-template-columns: 1fr;
    }
    .card {
        max-width: 400px;
    }
}