#diagnosis-start {

  counter-reset: step;

  & .start-diagnosis__container {
    --bg-color: #fff;
    background: linear-gradient(to right, var(--bg-color) 0%, var(--bg-color) 60%, transparent 95%);
    padding: var(--stb-space);
    
    display: flex;
    gap: 60px;
    
    @media (max-width: 640px) {
      flex-direction: column;
      background: linear-gradient(to bottom, var(--bg-color) 0%, var(--bg-color) 60%, transparent 95%);
    }

    & .start-about-session {
      max-width: 300px;
      width: 100%;

      & .time-session {
        width: fit-content;
        display: flex;
        flex-direction: column;
        gap: 8px;

        & .highlight {
          font-weight: bold;
          color: var(--stb-orange);
        }
      }
    }

    & .steps__container {
      width: 100%;

      & .steps-list {
        display: flex;
        flex-direction: column;
        gap: 20px;

        & .step-item {
          display: flex;
          gap: 20px;

          & .step::before {
            counter-increment: step;
            content: counter(step, decimal-leading-zero);
            font-weight: bold;
            font-size: clamp(32px, 2.5vw, 60px);
          }
        }
      }
    }
  }
}