/* === Auto-panels overrides (load after the component CSS) === */
.s-panels[data-auto-panels] .s-panels__projects-list { display:block; }

/* Landscape */
@media (orientation: landscape) {
  .s-panels[data-auto-panels] .s-panels__project-figure {
    transform-origin:left center;
    transform:scaleX(calc(1 / var(--s-panels-projects))) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-img {
    transform:scaleX(var(--s-panels-projects)) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-intro {
    width:calc(100% / var(--s-panels-projects)) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-preview .s-panels__project-figure {
    transform:translateX(calc((var(--i) - 1) * (100% / var(--s-panels-projects))))
              scaleX(calc(1 / var(--s-panels-projects))) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-preview .s-panels__project-intro {
    transform:translateX(calc((var(--i) - 1) * 100%)) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-preview--selected .s-panels__project-figure {
    transform:translateX(calc(50% - (50% / var(--s-panels-projects))))
              scaleX(calc(1 / var(--s-panels-projects))) !important;
  }
}

/* Portrait */
@media (orientation: portrait) {
  .s-panels[data-auto-panels] .s-panels__project-figure {
    transform-origin:center top;
    transform:scaleY(calc(1 / var(--s-panels-projects))) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-img {
    transform:scaleY(var(--s-panels-projects)) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-intro {
    height:calc(100% / var(--s-panels-projects)) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-preview .s-panels__project-figure {
    transform:translateY(calc((var(--i) - 1) * (100% / var(--s-panels-projects))))
              scaleY(calc(1 / var(--s-panels-projects))) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-preview .s-panels__project-intro {
    transform:translateY(calc((var(--i) - 1) * 100%)) !important;
  }
  .s-panels[data-auto-panels] .s-panels__project-preview--selected .s-panels__project-figure {
    transform:translateY(calc(50% - (50% / var(--s-panels-projects))))
              scaleY(calc(1 / var(--s-panels-projects))) !important;
  }
}