.pane.service-definitions,
.pane.services {
  --primary-color: #35A183;
  --primary-color-50: #E6F5F1;
  --primary-color-100: #CDE9E2;
  --primary-color-200: #9FD9CB;
  --primary-color-300: #71C9B4;
  --primary-color-400: #4DB99D;
  --primary-color-500: #35A183;
  --primary-color-600: #2E8A6D;
  --primary-color-700: #247156;
  --primary-color-800: #1A5840;
  --primary-color-900: #0F3A28;
  --top-color: #35A183;
  --collapsed-color: #71C9B4;
  --collapsed-text-color: #0F3A28;

  .pane-content {
    main {
      display: flex;
      flex-direction: column;
      gap: 60px;
      margin: 40px 20px 80px;
      padding: 32px 24px;
      max-width: var(--content-max-width, 1400px);
      align-self: stretch;
      width: calc(100% - 40px);
      box-sizing: border-box;

      svg {
        max-width: 300px;

        [id^='box'] {
          cursor: pointer;

          &.active,
          &:hover {
            rect {
              fill: var(--primary-color-600);
            }
            text {
              fill: white;
            }
          }
        }
      }

      @media (max-width: 1023.5px) {
        width: calc(100% - 48px);
        margin: 32px 24px 64px;
        padding: 24px;
      }

      @media (max-width: 767.5px) {
        width: 100%;
        margin: 20px 0 60px;
        padding: 20px;
      }
    }
  }
}