.problem {
  position: relative;
  padding: var(--space-24) 0;
  overflow: visible;
  background: #fff;
}

.problem > .container {
  position: relative;
  z-index: 1;
}

.problem__animated-line {
  position: absolute;
  top: 400px;
  left: -450px;
  width: 700px;
  height: 1120px;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-25deg);
  transform-origin: top left;
}

.problem__header {
  margin-bottom: var(--space-16);
  position: relative;
  z-index: 1;
  background: transparent;
}

.problem__header-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--space-12);
  align-items: start;
  background: transparent;
  position: relative;
}

.problem__header-grid .section-title {
  font-size: 60px;
  line-height: 1.05;
  color: #1E1E1E;
  margin-bottom: var(--space-4);
}

.problem__header-grid .section-title__part {
  display: block;
}

.problem__header-grid .section-title__part--regular {
  font-weight: 400;
}

.problem__header-grid .section-title__part--bold {
  position: relative;
  display: inline-block;
  font-weight: 700;
}


.problem__title-wrap {
  background: transparent;
}

.problem__lead {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #1E1E1E;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  padding: 0;
  text-align: start;
  background: transparent;
}

.problem__lead strong {
  font-weight: 700;
}

/* Carousel */
.problem__carousel {
  position: relative;
  overflow: hidden;
}

.problem__track {
  display: flex;
  gap: var(--space-6);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.problem__card {
  flex: 0 0 calc(50% - var(--space-3));
  width: 560px;
  border-radius: 12px;
  padding: var(--space-8);
  position: relative;
}

.problem__card--teal {
  position: relative;
}

.problem__emotion {
  position: absolute;
  top: 200px;
  right: -8%;
  width: 98px;
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.problem__card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: #1E1E1E;
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.problem__card h3 strong {
  font-weight: 700;
}

.problem__card p {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #1E1E1E;
  line-height: 1.6;
}

.problem__card p strong {
  font-weight: 700;
}

.problem__card--light {
  background: #F1F1F1;
  border: 9px solid #D6D6D6;
}

.problem__card-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--space-4);
}

.problem__card h3,
.problem__card p {
  transition: color var(--transition-base);
}

.problem__card {
  transition: background 0.3s ease, border-color 0.3s ease;
}

.problem__card:hover {
  background: #00C8CE;
  border-color: #11AAB2;
}

.problem__card:hover h3,
.problem__card:hover p {
  color: #fff;
}

.problem__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.problem__nav-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #C3B2FF;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.problem__nav-btn:hover {
  background: var(--color-purple);
}

@media (max-width: 768px) {
  .problem {
    padding: var(--space-16) 0;
  }

  .problem__header-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .problem__card {
    flex: 0 0 88%;
  }
}

@media (max-width: 480px) {
  .problem {
    padding: var(--space-12) 0;
  }

  .problem__card {
    flex: 0 0 92%;
    padding: var(--space-6);
  }
}