.home-problem {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  color: var(--color-white);
  background: var(--color-dark);
}

.home-problem::after {
  position: absolute;
  top: -22px;
  right: 5%;
  width: 260px;
  height: 190px;
  background-image: radial-gradient(circle, var(--color-dots-light) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  content: "";
}

.home-problem__header { position: relative; z-index: 1; display: grid; align-items: end; gap: 56px; margin-bottom: 54px; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); }
.home-problem__header h2 { margin: 0; color: var(--color-white); }
.home-problem__header p { margin: 0; color: var(--color-text-on-dark); font-size: 17px; line-height: 1.6; }
.home-problem__items { position: relative; z-index: 1; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-problem__item { min-height: 250px; padding: 28px; border: 1px solid var(--color-border-light-faint); border-radius: var(--radius-card); background: var(--color-surface-light-faint); }
.home-problem__icon { display: block; width: 56px; height: 56px; margin-bottom: 28px; }
.home-problem__icon img { display: block; width: 100%; height: 100%; }
.home-problem__item h3 { margin: 0 0 13px; color: var(--color-white); font-size: 22px; line-height: 1.25; }
.home-problem__item p { margin: 0; color: var(--color-text-on-dark); font-size: 15px; line-height: 1.6; }

@media (max-width: 900px) {
  .home-problem__header { gap: 18px; grid-template-columns: 1fr; }
  .home-problem__items { grid-template-columns: 1fr; }
  .home-problem__item { min-height: 0; }
  .home-problem__icon { margin-bottom: 22px; }
}

@media (max-width: 700px) {
  .home-problem { padding: 72px 0 52px; }
  .home-problem__header { margin-bottom: 32px; }
  .home-problem__header p { font-size: 16px; }
  .home-problem__item { padding: 22px; }
}