.component-fade-enter-active,.component-fade-leave-active{transform:translate(100%,0);transition:opacity 0.3s ease}.component-fade-enter,.component-fade-leave-to{transform:translate(-100%,0);opacity:0}.container{display:grid;grid-template-columns:33% 33% 33%;grid-template-rows:20% 20% 2% 8% 20% 10% auto}.elem{background:#00f;border:1px solid red}.titre{grid-column-start:1;grid-column-end:span 3;grid-row-start:1;background:green}.portrait-btn{grid-column-start:1;grid-row-start:2;background:pink}.entente-btn{grid-column-start:2;grid-row-start:4;background:pink}.horoscope-btn{grid-column-start:3;grid-row-start:2;grid-row-end:2;background:pink}.profile-pic{grid-column-start:2;grid-row-start:2;grid-row-end:span 2;background:#ff0}.score-h{grid-column-start:3}.score-h,.score-o{grid-row-start:3;grid-row-end:span 2;background:green}.score-o{grid-column-start:1}.graph{grid-column-start:2;grid-row-start:5;background:#ff0}.legende{grid-column-start:1;grid-column-end:span 3;grid-row-start:6;background:green}