/* problem.css - Problem statement component */

.problem {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.problem__item {
  flex: 0 0 calc((100% - var(--space-md) * 3) / 4);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.problem__image {
  display: flex;
  justify-content: center;
}

.problem__image img {
  max-width: 200px;
}

.problem__text {
  text-align: center;
}

.problem__text h3 {
  margin: var(--space-sm) 0;
  font-size: var(--fz-rg);
  line-height: 1.4;
}

.problem__text p {
  font-size: var(--fz-rg);
  line-height: 1.4;
  color: var(--color-text-light);
  text-align: left;
}

@media (max-width: 767px) {
  .problem {
    flex-direction: column;
  }

  .problem__image img {
    max-width: 120px;
  }

  .problem__text h3 {
    margin: var(--space-sm) 0;
    font-size: var(--fz-md);
  }

  .problem__text p {
    margin: 0;
    line-height: 1.4;
  }
}