.roleGrid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.role {
  border-radius: 10px;
  padding: 0 20px;
  background-color: #88fc6f;
  border-right: 2px solid #22ba00;
  border-bottom: 2px solid #22ba00;
}

.role > p {
  color: var(--primary);
  font-size: 1.5rem;
  margin-bottom: 0;
}

.role > p + p {
  color: var(--secondary);
  font-size: 1em;
  margin-bottom: 1em;
}

.role > p + p::before {
  content: "~ ";
}

@media (min-width: 560px) {
  .roleGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1040px) {
  .roleGrid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}