@layer sections {
  .problems {
    position: relative;
    overflow: hidden;
    padding-block: var(--sp-120);
    color: var(--label-primary);
    background: var(--surface-primary);
  }

  .problems__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-56);
  }

  .problems__intro,
  .problems__title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .problems__intro {
    gap: var(--sp-16);
    max-width: 994px;
  }

  .problems__title-group { gap: var(--sp-24); }
  .problems__intro .t-overline { color: var(--label-quaternary); }

  .problems__card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    width: 100%;
    padding: var(--sp-12);
    overflow: hidden;
    border: .5px solid var(--surface-separator);
    border-radius: var(--r-20);
    background:
      radial-gradient(circle at 92% 5%, #f8faff0d, transparent 36%),
      var(--surface-glass-1);
  }

  .problems__head,
  .problem-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-24);
    width: 100%;
    padding: var(--sp-16);
  }

  .problems__column-head {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    min-width: 0;
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -.01em;
  }

  .problems__head-icon { color: var(--accent-secondary); }
  .problems__column-head--solution .problems__head-icon { color: var(--accent-primary); }

  .problems__divider {
    width: calc(100% - var(--sp-32));
    height: .5px;
    margin-inline: var(--sp-16);
    border-radius: var(--r-full);
    background: var(--surface-separator);
  }

  .problems__list { list-style: none; }

  .problem-row__cell {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    min-width: 0;
  }

  .problem-row__title {
    font-family: var(--font-body);
    font-size: var(--fs-h5);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -.01em;
  }

  .problem-row__description { color: var(--label-secondary); }
  .problem-row__description p { margin: 0; }

  .problems__tape {
    position: absolute;
    z-index: 2;
    top: 286px;
    left: calc(50% + 545px);
    width: 506px;
    height: 364px;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .problems__tape-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  @media (max-width: 900px) {
    .problems__tape { display: none; }
  }

  @media (max-width: 767px) {
    .problems { padding-block: var(--sp-96); }
    .problems__intro { max-width: none; }
    .problems__text {
      font-size: var(--fs-body-1);
      line-height: 1.3125;
    }
  }

  @media (max-width: 420px) {
    .problems__card { padding: var(--sp-8); }

    .problems__head,
    .problem-row {
      gap: var(--sp-16);
      padding: var(--sp-12);
    }

    .problems__column-head { gap: var(--sp-8); }
    .problems__divider {
      width: calc(100% - var(--sp-24));
      margin-inline: var(--sp-12);
    }
  }

  @media (max-width: 340px) {
    .problems__head,
    .problem-row { grid-template-columns: 1fr; }
  }
}