Looking at me | versión expediente

<div class="bt2-expediente"><div class="bt2exp-botones">
<input type="radio" id="btexp-indice" name="bt2exp-contenido" checked/><label for="btexp-indice"><i class="sf sf-badger-o"></i><span>Inicio</span></label><input type="radio" id="btexp-historia" name="bt2exp-contenido"/><label for="btexp-historia"><i class="sf sf-rabbit-o"></i><span>Historia</span></label>
<input type="radio" id="btexp-datos" name="bt2exp-contenido"/><label for="btexp-datos"><i class="sf sf-ladybug-o"></i><span>Otros datos</span></label>

<div class="bt2exp-contenido" style="background:url(https://placehold.jp/500x580.png)center; background-size:cover;"><div class="bt2exp-conportada"><div>
<img src="https://placehold.jp/200x200.png"/>
<div class="bt2exp-nombre">Nombre del personaje</div>
<div class="bt2exp-datos"><div><i class="sf sf-chevron-right"></i> Nombre completo</div><div><i class="sf sf-chevron-right"></i>xx años, xx/xx</div><div><i class="sf sf-chevron-right"></i>Nacionalidad</div><div><i class="sf sf-chevron-right"></i>Grupo</div><div><i class="sf sf-chevron-right"></i>PB</div><div><i class="sf sf-chevron-right"></i>otro dato</div></div>
</div></div></div>

<div class="bt2exp-contenido"><div class="bt2exp-texto">Texto
</div></div>

<div class="bt2exp-contenido"><div class="bt2exp-texto">Texto
</div></div>
</div></div>

/**************************** FUENTES PARA AGREGAR EN EL TEMPLATE ******************************************/
<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,900" rel="stylesheet"/>

/************************************************** CSS ***************************************************/
.bt2-expedient br{display:none}
/*Variables para cambiar color y fuentes*/
.bt2-expediente{--bt25-border:1px solid #ddd; --bt25-fondo:#fff; --bt25-acento:#959abd; --bt25-color:#555;--bt25-fondo-2:#fafafa; --bt25-font:Roboto, sans-serif;}
/*****************************/
.bt2-expediente{width:540px; height:700px; margin:10px auto; background:var(--bt25-fondo-2); position:relative; overflow:hidden; border:20px solid var(--bt25-fondo); outline:var(--bt25-border); outline-offset:-20px;color:var(--bt25-color); box-shadow:0 0 1px #444; font-family:var(--bt25-font); box-sizing:border-box;}
.bt2exp-botones{border-bottom: var(--bt25-border); height:79px; width: max-content;}
.bt2exp-botones input{display:none;}
.bt2exp-botones > label{display:flex; border:var(--bt25-border); border-radius:40px; padding:5px; font-size:12px; margin:0px 3px; background:var(--bt25-fondo); overflow:hidden;webkit-transition: 1s; -o-transition: 1s;transition: 1s; min-width:38px; max-width:55px; float:left; top:18px; position:relative; left:80px; cursor:crosshair}
.bt2exp-botones > label i{min-width:55px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:30px; font-size:20px; color:var(--bt25-acento);}
.bt2exp-botones > label span{width:120px; display:flex; align-items:center;font-size:12px; margin-left:5px; line-height:12px;text-align:left;}
.bt2exp-botones input:checked + label {min-width:165px!important; webkit-transition: 1s; -o-transition: 1s;transition: 1s;opacity:1;}
.bt2exp-contenido{width:500px; height:580px; background:var(--bt25-fondo-2); position:relative; top:80px; display:flex;  -webkit-transition: all 0.7s ease-in-out 0s;-moz-transition: all 0.7s ease-in-out 0s;-o-transition: all 0.7s ease-in-out 0s;transition: all 0.7s ease-in-out 0s; align-items:center; justify-content:center; float:left;}
#btexp-indice:checked ~ .bt2exp-contenido{left:-329px}
#btexp-historia:checked ~ .bt2exp-contenido{left:-829px;}
#btexp-datos:checked ~ .bt2exp-contenido{left:-1329px;}
.bt2exp-conportada{backdrop-filter:blur(1px) grayscale(1); width:500px; height:580px; display:flex; align-items:center; justify-content:center;}
.bt2exp-conportada div > img{display:block; width:200px; height:200px; border:12px solid var(--bt25-acento); position:relative; padding:5px; margin:0 auto;}
.bt2exp-conportada div > .bt2exp-nombre{font-size:25px; text-transform:uppercase; font-weight:900; color:var(--bt25-acento); letter-spacing:-.5px; width:300px; line-height:24px; margin:10px 0px; text-align:center;}
.bt2exp-conportada div > .bt2exp-datos{margin-top:20px; width:300px;}
.bt2exp-datos > div{color:var(--bt25-color); font-size:10px; text-transform:uppercase; background:var(--bt25-fondo); margin:4px 0px 4px 4px; border-radius:10px; border:var(--bt25-border); font-weight:600; display:block; height:30px; display:flex; align-items:center; overflow:hidden;}
.bt2exp-datos > div i{font-size:7px; background:var(--bt25-acento); padding-right:0px; height:30px; margin-left:-1px; width:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; margin-right:10px; color:var(--bt25-fondo)}
.bt2exp-texto br{display:block!important;}
.bt2exp-texto{width:420px; margin:10px auto; max-height:500px; overflow:auto; padding:0px 20px; font-size:12.5px; line-height:18px; text-align:justify;}