/*------------------------------------------------------------------*/
/*                          Split  panels                           */
/*------------------------------------------------------------------*/

.split-panel {
  border-radius: var(--border-radius-large);
  box-shadow: 0 3px 3px var(--color-gray-light);
}

.split-panel .panel {
  background-color: var(--color-gray-lightest);
}

.split-panel .panel.dark,
.split-panel .panel.dark > *:is(h1, h2, h3, h4, h5, h6, p) {
  background-color: var(--color-purple-light);
  color: var(--color-white);
}

.split-panel .panel.dark em {
  color: var(--color-mint-medium);
}

.split-panel .panel.dark a:not(:is(.link-btn, .button)) {
  color: var(--color-orange-light);
  text-decoration-color: var(--color-orange-light);
}

.split-panel .panel-left {
  border-top-left-radius: var(--border-radius-large);
  border-top-right-radius: var(--border-radius-large);
}

.split-panel .panel-right {
  border-bottom-left-radius: var(--border-radius-large);
  border-bottom-right-radius: var(--border-radius-large);
}

@media (min-width: 640px) {
  .split-panel .panel-left {
    border-top-right-radius: 0;
    border-top-left-radius: var(--border-radius-large);
    border-bottom-left-radius: var(--border-radius-large);
  }

  .split-panel .panel-right {
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--border-radius-large);
    border-bottom-right-radius: var(--border-radius-large);
  }
}

.split-panel .button {
  margin-top: 1rem;
}