@media (min-width: 768px) {
  html:has(body .split-layout),
  body:has(.split-layout) {
    height: 100%;
    overflow: hidden;
  }

  body:has(.split-layout) #content {
    min-height: 100dvh;
  }

  .split-layout {
    height: 100dvh;
    min-height: 100dvh !important;
    overflow: hidden;
  }

  .split-layout > .section-left,
  .split-layout > .section-right {
    height: 100dvh;
    min-height: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .split-layout > .section-left::-webkit-scrollbar,
  .split-layout > .section-right::-webkit-scrollbar {
    width: 10px;
  }

  .split-layout > .section-left::-webkit-scrollbar-track,
  .split-layout > .section-right::-webkit-scrollbar-track {
    background: transparent;
  }

  .split-layout > .section-left::-webkit-scrollbar-thumb,
  .split-layout > .section-right::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
  }

  .split-layout > .section-left {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  }

  .split-layout > .section-right {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  }
}