.row {
  height: 100%;
}

:root {
  --radius: 72px;
  --radiusbtn: 25px;
  --shadow: 0 24px 60px rgba(0,0,0,.08);
  --blue: #0074E9;
  --bg: #f4f5f7;
  --slide-ease: cubic-bezier(.2,.9,.2,1);
}

.stacked {
  /*padding: 24px;*/
  background: var(--bg);
}

.stacked__wrap {
  position: relative;
  max-width: 1644px;
  margin: 0 auto;
  height: clamp(600px, 52vw, 660px);
  overflow: hidden;
  /*background: #fff;*/
  /*box-shadow: var(--shadow);*/
}

.tabs {
  /*position: absolute;*/
  /*inset: 0 0 0 auto;*/
  /*width: var(--navW);*/
  /*display: flex;*/
  /*align-items: stretch;*/
  /*z-index: 50;*/
}

.tab {
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--tab-color);
  place-items: center;
  flex: 0 0 calc(100% / 12);
  width: calc(100% / 12);
  min-width: calc(100% / 12);
  z-index: 100!important;
  /*padding: clamp(24px, 3vw, 56px);*/
  /*transition: all 300ms ease;*/
}

.tab__text {
  color: #fff;
  font: 400 44px/1 Polymath Display, polymath-display;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateY(0);
  user-select: none;
  /*transition: opacity 200ms ease;*/
  /*transition: transform 0.3s ease;*/
}

.tab.is-active .tab__text {
  opacity: 0!important;
}

.tab.is-active {
  background: transparent;
  /*background: var(--bs-red)!important;*/
  height: 70%;
}

.panels {
  position: absolute;
  inset: 0;
  width: 100%;
  --panelW: 80%;
  --tabStep: calc(var(--panelW) / 12);
  background-color: transparent;
}

.panel {
  position: absolute;
  inset: 0;
  background: #F4F7F9;
  /*box-shadow: var(--shadow);*/
  overflow: hidden;
  /*pointer-events: none;*/
  transition: transform 560ms var(--slide-ease), opacity 240ms ease;
  will-change: transform;
  height: auto;
  width: var(--panelW);
}

.panel.is-active {
  /*transform: translateX(0px);*/
  opacity: 1;
  pointer-events: auto;
  /*z-index: 20;*/
}

.panel__content {
  /*position: absolute;*/
  /*inset: 0;*/
  /*padding: clamp(24px, 3vw, 56px);*/
  /*padding-right: calc(var(--navW) + clamp(18px, 2vw, 28px));*/
  display: grid;
  align-content: start;
  gap: 18px;
  height: 100%;
  /*width: 80%;*/
  background: transparent;
}

.panel__content h2 {
  margin: 0;
  font: 400 clamp(34px, 4.2vw, 56px)/1.02 Polymath Display, polymath-display;
  color: var(--bs-dark);
}

.panel__content h3 {
  margin: 0;
  font: 500 clamp(20px, 2.3vw, 28px)/1.18 Peridot PE Variable, peridot-pe-variable;
  color: var(--blue);
  max-width: 52ch;
}

.panel__content p {
  margin: 0;
  font: 400 16px/1.55 Peridot PE Variable, peridot-pe-variable;
}

.btn {
  /*justify-self: start;*/
  /*display: inline-flex;*/
  /*align-items: center;*/
  /*padding: 12px 20px;*/
  /*border-bottom-right-radius: var(--radiusbtn);*/
  /*border-top-left-radius: var(--radiusbtn);*/
  /*border-top-right-radius: 0px;*/
  /*border-bottom-left-radius: 0px;*/
  /*border: 1.5px solid rgba(11,88,230,.45);*/
  /*color: var(--blue);*/
  /*text-decoration: none;*/
  /*font: 600 16px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;*/
  /*background: transparent;*/
  /*z-index: 100!important;*/
}

@media (max-width: 720px) {
  :root {
    /*--railW: 68px;*/
    /*--radius: 28px;*/
  }
}

@media (max-width: 720px) {
  .tab__text {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab__text {
    transition: none;
  }
}

.panel:nth-child(1) {
  margin-left: calc(0 * var(--tabStep));
  z-index: 4;
}

.panel__content:nth-child(1) {
  /*background: #ffffff;*/
  border-bottom-right-radius: var(--radius);
}

.panel__content:nth-child(2) {
  /*background: #ffffff;*/
  /*border-bottom-right-radius: var(--radius);*/
}

.panel__content:nth-child(3) {
  /*background: #ffffff;*/
  /*border-bottom-right-radius: var(--radius);*/
}

.panel__content:nth-child(4) {
  /*background: #ffffff;*/
  /*border-bottom-right-radius: var(--radius);*/
}

.panel:nth-child(2) {
  margin-left: calc(1 * var(--tabStep));
  z-index: 3;
}

.panel:nth-child(3) {
  margin-left: calc(2 * var(--tabStep));
  z-index: 2;
}

.panel:nth-child(4) {
  margin-left: calc(3 * var(--tabStep));
  z-index: 1;
}

.panel.p1:not(.is-active) {
  transform: translateX(-92%);
}

.panel.p2.position2 {
  transform: translateX(-92%);
}

.panel.p3.position2 {
  transform: translateX(-92%);
}

.tab.is-active .tab__num {
  background-color: rgba(227,9,9,0.0);
  width: 2.5rem;
  height: 2.5rem;
  opacity: 1!important;
  border: 1.5px solid;
  border-color: var(--bs-primary);
  color: var(--bs-primary)!important;
  margin-left: -40px;
}

.tab:hover .tab__num {
  background-color: rgba(255, 255, 255, 0.35);
}

.tab__num {
  background-color: rgba(255, 255, 255, 0.20);
  width: 2.5rem;
  height: 2.5rem;
  padding-top: 8px;
  transition: all .3s ease;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0);
}

.panel__content2 {
  position: absolute;
  inset: 0;
  /*z-index: 100;*/
  padding-left: 3rem;
  padding-right: calc((100% / 12 - 2.5rem + 40px) / 2);
  opacity: 1;
  transition: opacity .3s;
}

.panel:not(.is-active) .panel__content2 {
  opacity: 0;
}