.esp-panels{
  --esp-text: #ffffff;
  --esp-divider: rgba(255,255,255,0.35);
  --esp-speed: 550ms;
  --esp-ease: cubic-bezier(.65,0,.2,1);
  display:flex;
  width:100%;
}
.esp-panel{
  position:relative;
  height:100%;
  flex: 0 0 84px;
  box-sizing:border-box;
  transition: flex-basis var(--esp-speed) var(--esp-ease), flex-grow var(--esp-speed) var(--esp-ease);
  border-left:1px solid var(--esp-divider);
  overflow:hidden;
}
.esp-panel:first-child{ border-left:none; }
.esp-panel.is-active{ flex-grow:1; }

.esp-panel__toggle{
  all:unset;
  display:block;
  box-sizing:border-box;
  position:relative;
  width:100%;
  height:100%;
  cursor:pointer;
}

.esp-panel__media,
.esp-panel__body{
  opacity:0;
  pointer-events:none;
  transition: opacity 0.35s ease;
  box-sizing:border-box;
}
.esp-panel.is-active .esp-panel__media,
.esp-panel.is-active .esp-panel__body{
  opacity:1;
  pointer-events:auto;
  transition-delay: 0.25s;
}

.esp-panel__media{
  position:absolute;
  top:32px;
  left:32px;
  width:120px;
  height:120px;
  border-radius:50%;
  overflow:hidden;
}
.esp-panel__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.esp-panel__body{
  position:absolute;
  inset:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:left;
  color:var(--esp-text);
  padding:32px 32px 36px;
}
.esp-panel__title{
  display:block;
  font-size:22px;
  line-height:1.3;
  font-weight:600;
  margin-bottom:14px;
}
.esp-panel__rule{
  display:block;
  width:42px;
  height:2px;
  background:var(--esp-text);
  opacity:0.6;
  margin-bottom:14px;
}
.esp-panel__desc{
  display:block;
  font-size:14px;
  line-height:1.6;
  max-width:38ch;
  opacity:0.9;
}

.esp-panel__collapsed{
  position:absolute;
  inset:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:28px 12px 20px;
  opacity:1;
  transition: opacity 0.25s ease;
  color:var(--esp-text);
}
.esp-panel.is-active .esp-panel__collapsed{
  opacity:0;
  pointer-events:none;
}
.esp-panel__icon{
  color:var(--esp-text);
  font-size:28px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.esp-panel__icon i,
.esp-panel__icon svg{
  width:1em;
  height:1em;
  font-size:inherit;
}
.esp-panel__label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size:14px;
  letter-spacing:0.02em;
  white-space:nowrap;
}

@media (max-width: 780px){
  .esp-panels{ flex-direction:column; height:auto !important; }
  .esp-panel{ flex-basis:64px !important; border-left:none; border-top:1px solid var(--esp-divider); }
  .esp-panel:first-child{ border-top:none; }
  .esp-panel.is-active{ flex-basis:420px !important; }
  .esp-panel__collapsed{ flex-direction:row; justify-content:flex-start; padding:0 20px; height:64px; }
  .esp-panel__label{ writing-mode:horizontal-tb; transform:none; }
  .esp-panel__media{ width:80px; height:80px; top:20px; left:20px; }
}

@media (prefers-reduced-motion: reduce){
  .esp-panel, .esp-panel__media, .esp-panel__body, .esp-panel__collapsed{ transition:none !important; }
}