.solution-row.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 80px;
}

.solution-row.cards h5 {
  margin: 0 0 20px;
}

.card {
  position: relative;
}

.card .number {
  position: absolute;
  color: var(--color-yellow);
  font-weight: 900;
  font-size: 18px;
}

.card > div:not(.number) {
  padding: 40px 25px 40px 30px;
  height: 150px;
  background-color: var(--color-white);
  color: var(--color-black);
  transition: all .3s ease;
}

.card > div:not(.number):hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

#solution .card h5 {
  display: inline-block;
  margin-bottom: 10px;
}

.card .clip-right-bottom-left-top-corner {
  clip-path: polygon(0% 50px, 0% 100%, calc(100% - 50px) 100%, 100% calc(100% - 50px), 100% 0%, 50px 0%);
}

@media (max-width: 991px) {
  .solution-row.cards {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 40px;
    padding: 0 25px;
  }
}

@media (max-width: 480px) {
  .solution-row.cards {
    display: flex;
    flex-direction: column;
  }
}