.tout-sliding-panels {
  & .panel {
    @apply transition-colors;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 26.67%, rgba(0, 0, 0, 0.75) 100%);
    &:first-child {
      &:before {
        opacity:0;
      }
      &:after {
        background-color:var(--ccg-orange-40);
      }
    }
    &:nth-child(2) {
      &:before {
        opacity:0.3;
      }
      &:after {
        background-color:var(--ccg-orange-60);
      }
    }
    &:nth-child(3) {
      &:before {
        opacity:0.6;
      }
      &:after {
        background-color:var(--ccg-orange-80);
      }
    }
    &:not(.active-panel):hover {
      cursor:pointer;
      &:first-child:after, &:nth-child(2):after, &:nth-child(3):after {
        background-color:var(--ccg-purple);
      }
    }
    &.active-panel {
      & .panel-content {
        transition max-height var(--primary-transition-details);
        & .description {
          transition:max-height 600ms;
        }
      }
      &:first-child:after, &:nth-child(2):after, &:nth-child(3):after {
        background-color:var(--ccg-orange);
      }
    }
  }
}

@media screen and (min-width:1024px) {
  .tout-sliding-panels {
    & .panel {
      transition-property:max-width;
      & .panel-content {
        transition:all 0s linear 0s;
        & .description {
          transition:all 0s 0s;
        }
      }
      &.active-panel {
        & .panel-content {
          transition:all 600ms ease-in-out 0s;
          & .description {
            transition:width 0s 600ms, max-height 600ms 600ms, opacity 600ms 601ms;
          }
        }
      }
    }
  }
}