/* Main container */
.list-details {
  display: flex;
  margin: 0 calc(2 * var(--spacing)) 0 calc(2 * var(--spacing));
  padding: var(--spacing) calc(2 * var(--spacing)) var(--spacing) calc(2 * var(--spacing));
  width: calc(100% - 2 * var(--spacing));
 
}

/* Left side*/
.list-details > .list {
  background-color:  var(--bg);
  color: var(--text);

  list-style: none;
  padding: calc(var(--spacing) / 3) 
           calc(var(--spacing)) 
           calc(var(--spacing) / 3) 
           calc(var(--spacing) * 2);
  margin: 0;
  width: 50%;
}

.list-details.accent > .list{
  background-color:  var(--accent-bg);
  color: var(--accent);
}

.list-details > .list > ul{
  padding: 0;
}

/* Right side */
.list-details > .details {
  background-color:  var(--accent-bg);
  color: var(--accent);
  
  padding: calc(var(--spacing) / 3) 
           calc(var(--spacing) * 2) 
           calc(var(--spacing) / 3) 
           calc(var(--spacing));
  margin: 0;
  width: 50%;
}

.list-details.accent > .details{
  background-color:  var(--bg);
  color: var(--text);
}

/* Title */
.list-details > .list > h1,
.list-details > .list > h2,
.list-details > .list > h3,
.list-details > .list > h4,
.list-details > .list > h5,
.list-details > .list > h6 {
  text-align: left;
  margin: 0 0 0 0;
}

/* List Elements */

.list-details > .list > ul > li{
  display: flex;
  justify-content: start;
  align-content: center;
  border-bottom: 1px solid white;
  padding: calc(var(--spacing) / 3) 
           0
           calc(var(--spacing) / 3) 
           0;
}

.list-details > .list > ul > li:hover{
  background-color: var(--accent-bg-focus);
  font-size: 1.2rem;
  transition: background-color 1s, font-size 1s;
}

/* Last element has no border */
.list-details > .list > ul > li:last-child{
  border-bottom: 0;
}

/* Elements have a right chevron after them*/
.list-details > .list > ul > li::after{
  margin-left: calc(var(--spacing) / 2);
  content: '❯';
}

/* Animating content */
  .list-details > .details > article {
    height: 0;
    opacity: 0;
    /*transition: opacity 1s;*/
    margin: 0;
    width: 100%;
    border: 0;
    background-color: #fff0;
    padding: 0;
  }

  .list-details > .details article[data-visible="true"] {
    opacity: 1;
    transition: height 0s, opacity 1s;
  }

  .list-details > .details > article > h1,
  .list-details > .details > article > h2,
  .list-details > .details > article > h3,
  .list-details > .details > article > h4,
  .list-details > .details > article > h5,
  .list-details > .details > article > h6 {
    margin-top:0;
    text-align: left;
  }