/* ===================================================
   Layout: Problem and solutions
   File:   template-parts/flexible/problem_and_solutions/problem_and_solutions.css
=================================================== */
.problem-and-solutions__container {
  padding: 40px 0;
}

.problem-and-solutions-header {
  gap: 24px;
  padding: 0 6%;
}

.problem-and-solutions-header p {
  margin: 0 !important;
}

.ps-box-row {
  padding-top: 26px;
}

.ps-box {
  height: 350px;
  border-radius: 10px;
  border: 1px solid #28282826;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-13);
  color: var(--color-18);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 24px;
}

.ps-box::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 0;
  background-color: var(--color-18);
  transition: height 0.5s ease;
  z-index: -1;
}

.ps-box:hover::before {
  height: 100%;
}

.ps-box h3,
.ps-box p {
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
  margin: 0 !important;
}

.ps-box:hover h3,
.ps-box:hover p {
  color: var(--color-17);
}

/* RWD  */
@media (max-width: 767px) {
  .problem-and-solutions-header {
    padding: 0;
  }

  .ps-box-row {
    padding-top: 24px;
  }

  .ps-box {
    padding: 20px;
    height: 250px;
    background-color: var(--color-18);
    color: var(--color-17);
  }

  .ps-box::before {
    display: none;
  }

  .ps-box h3,
  .ps-box p {
    color: var(--color-17);
  }
}