.problem-solution__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.problem-solution__problems {
  display: grid;
  gap: 14px;
}

.narrative-card {
  padding: 26px 24px;
}

.narrative-card--problem {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  overflow: hidden;
}

.narrative-card--problem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, rgba(17, 114, 191, 0.94), rgba(92, 203, 255, 0.52));
}

.narrative-card--solution {
  position: relative;
  background:
    radial-gradient(circle at top right, rgba(72, 191, 255, 0.18), transparent 28%),
    linear-gradient(135deg, #071f3b, #0d4f88 72%, #0b66ab);
  color: var(--color-white);
}

.narrative-card--solution h3,
.narrative-card--solution li {
  color: var(--color-white);
}

.narrative-card h3 {
  margin-bottom: 12px;
  text-wrap: pretty;
}

.narrative-card p {
  color: rgba(15, 39, 71, 0.8);
}

.narrative-card--solution ul {
  display: grid;
  gap: 14px;
  padding: 0;
  margin-top: 18px;
  list-style: none;
}

.narrative-card--solution li {
  position: relative;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.84);
}

.narrative-card--solution li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7fd0ff;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .narrative-card {
    padding: 24px 22px;
  }
}

@media (min-width: 901px) {
  .problem-solution__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    align-items: start;
  }

  .narrative-card--solution {
    position: sticky;
    top: 112px;
  }
}