/* ==================================================
   PROBLEM
================================================== */

/* ==================================================
   PROBLEM SECTION
================================================== */

.problem {
  background: #f7f8fa;

  padding-block: 5rem;
}

/* ==================================================
   PROBLEM LAYOUT
================================================== */

.problem__layout {
  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;
}

/* ==================================================
   PROBLEM VISUAL
================================================== */

.problem__visual {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: flex-end;

  width: 100%;
  max-width: 100%;

  margin: 0;

  overflow: hidden;

  /* background: #f1f3f5; */
}

/* =========================================
   Yellow Background Shape
========================================= */

.problem__visual::before {
  content: "";

  position: absolute;

  width: 70%;
  height: 88%;

  left: 50%;
  bottom: 0;
  transform: translateX(-50%);

  /* background: #f5c400;
   */

  background-image: linear-gradient(to right top, #f5c400, #f59e0b);
  border-radius: 19% 19% 12% 12% / 12% 12% 12% 12%;

  z-index: 0;
}

/* =========================================
   Image
========================================= */

.problem__image {
  position: relative;

  display: block;

  width: 70%;
  height: 100%;

  aspect-ratio: 3 / 4;

  object-fit: contain;

  z-index: 1;
}

/* ==================================================
   PROBLEM CONTENT
================================================== */

.problem__content {
  max-width: 520px;
}

.problem__description {
  max-width: 500px;

  margin-bottom: 1.5rem;

  color: #6b7280;

  font-size: 0.95rem;

  line-height: 1.75;
}

/* ==================================================
   PROBLEM LIST
================================================== */

.problem__list {
  display: flex;

  flex-direction: column;

  gap: 0.9rem;
}

.problem__item {
  display: flex;

  align-items: center;

  gap: 0.85rem;

  color: #374151;

  font-size: 0.9rem;
  font-weight: 500;
}

/* ==================================================
   PROBLEM ICON
================================================== */

.problem__icon {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  width: 2rem;
  height: 2rem;

  background: #fff7ed;

  border: 1px solid #fed7aa;

  border-radius: 50%;

  color: #f59e0b;

  font-size: 0.8rem;
}

/* ==================================================
   TABLET
   1024px
================================================== */

@media (max-width: 1024px) {
  .problem {
    padding-block: 4.5rem;
  }

  .problem__layout {
    gap: 3rem;
  }

  .problem__content {
    max-width: 460px;
  }

  .problem__description {
    font-size: 0.9rem;
  }

  .problem__item {
    font-size: 0.85rem;
  }
}

/* ==================================================
   MOBILE
   768px
================================================== */

@media (max-width: 768px) {
  .problem {
    padding-block: 4rem;
  }

  .problem__layout {
    grid-template-columns: 1fr;

    gap: 2.5rem;
  }

  /* Visual */

  .problem__visual {
    width: 100%;

    max-width: 550px;

    margin-inline: auto;

    order: 1;
  }

  /* Content */

  .problem__content {
    max-width: 600px;

    margin-inline: auto;

    text-align: center;

    order: 2;
  }

  .problem__description {
    max-width: 600px;

    margin-inline: auto;

    margin-bottom: 1.5rem;

    font-size: 0.9rem;

    line-height: 1.65;
  }

  /* List */

  .problem__list {
    width: fit-content;

    margin-inline: auto;

    align-items: flex-start;

    text-align: left;
  }
}

/* ==================================================
   SMALL MOBILE
   480px
================================================== */

@media (max-width: 480px) {
  .problem {
    padding-block: 3.5rem;
  }

  .problem__layout {
    gap: 2rem;
  }

  .problem__visual {
    border-radius: 1rem;
  }

  .problem__visual::after {
    width: 160px;
    height: 160px;

    right: -70px;
    bottom: -70px;
  }

  .problem__description {
    font-size: 0.85rem;

    line-height: 1.6;
  }

  .problem__list {
    gap: 0.75rem;
  }

  .problem__item {
    gap: 0.7rem;

    font-size: 0.8rem;
  }

  .problem__icon {
    width: 1.8rem;
    height: 1.8rem;

    font-size: 0.7rem;
  }
}