/* Problem Section Styles */
.problem {
  background: var(--light-background);
  padding-block: var(--section-padding);
}

/* Wrapper constraint for title */
.problem__title-wrapper {
  max-width: 820px;
  width: 100%;
  margin-left: auto;
  margin-bottom: 2rem;
}

/* Grid layout */
.problem__grid {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.problem__row {
  display: flex;
  gap: var(--gap);
}

/* Top row: 3 columns */
.problem__row:first-child .problem__cell {
  flex: 0 0 calc(100% / 3);
}

/* Bottom row: 2 columns */
.problem__row:last-child .problem__cell {
  flex: 0 0 50%;
}

/* Cell styles */
.problem__cell {
  background: var(--dark-background);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(
  --gap);
  line-height: 1.4;
  color: var(
  --color-black);
  gap: 1rem;
  border-radius: var(
  --radius);
}

.problem__text {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--color-black);
  max-width: 300px;
}

.problem__icon {
  width: 54px;
  height: 54px;
  display: flex;
  color: var(--color-primary);
}

/* Mobile: stack to 1 column */
@media (max-width: 768px) {
  .problem__row {
    flex-direction: column;
    gap: var(--gap);
  }

  .problem__row .problem__cell {
    flex: 0 0 100%;
  }
}

/* Small screens title reset */
@media (max-width: 786px) {
  .problem__title-wrapper {
    max-width: 100%;
    margin-left: 0;
  }
}