:root {
  --accordion-tab-width: 3rem;
}
.accordion-container {
  height: 350px;
  width: 100%;
  margin: 0 auto;
  background: white;
  overflow: hidden;
  position: relative;
}
.accordion-item {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  height: 100%;
  grid-template-rows: 100%;
  background: white;
  width: 100%;
  transition: left 0.5s ease;
}
.accordion-tab {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.tab-text {
  writing-mode: sideways-lr;
  display: block;
  width: 100%;
  height: 100%;
}

.accordion-item:nth-last-child(1) {
  left: calc(100% - var(--accordion-tab-width));
}
.accordion-item:nth-last-child(2) {
  left: calc(100% - 2*var(--accordion-tab-width));
}
.accordion-item:nth-last-child(3) {
  left: calc(100% - 3*var(--accordion-tab-width));
}
.accordion-item:nth-last-child(4) {
  left: calc(100% - 4*var(--accordion-tab-width));
}
.accordion-item:nth-last-child(5) {
  left: calc(100% - 5*var(--accordion-tab-width));
}
.accordion-item:nth-last-child(6) {
  left: calc(100% - 6*var(--accordion-tab-width));
}
.accordion-item:nth-last-child(7) {
  left: calc(100% - 7*var(--accordion-tab-width));
}
.accordion-item:first-child {
  left: 0;
}
.accordion-item.active:nth-child(2) {
  left: calc(1*var(--accordion-tab-width));
}
.accordion-item.active:nth-child(3) {
  left: calc(2*var(--accordion-tab-width));
}
.accordion-item.active:nth-child(4) {
  left: calc(3*var(--accordion-tab-width));
}
.accordion-item.active:nth-child(5) {
  left: calc(4*var(--accordion-tab-width));
}
.accordion-item.active:nth-child(6) {
  left: calc(5*var(--accordion-tab-width));
}
.accordion-item.active:nth-child(7) {
  left: calc(6*var(--accordion-tab-width));
}
/* Collapsed first */
.accordion-hide-first-tab .accordion-item:first-child{
  grid-template-columns: 100%;
}
.accordion-hide-first-tab .accordion-item:first-child .accordion-tab {
  display: none;
}
.accordion-hide-first-tab .accordion-item.active:nth-child(2) {
  left: calc(0*var(--accordion-tab-width));
}
.accordion-hide-first-tab .accordion-item:first-child .accordion-tab {
  display: none;
}
.accordion-hide-first-tab .accordion-item.active:nth-child(3) {
  left: calc(1*var(--accordion-tab-width));
}
.accordion-hide-first-tab .accordion-item.active:nth-child(4) {
  left: calc(2*var(--accordion-tab-width));
}
.accordion-hide-first-tab .accordion-item.active:nth-child(5) {
  left: calc(3*var(--accordion-tab-width));
}
.accordion-hide-first-tab .accordion-item.active:nth-child(6) {
  left: calc(4*var(--accordion-tab-width));
}
.accordion-hide-first-tab .accordion-item.active:nth-child(7) {
  left: calc(5*var(--accordion-tab-width));
}