.panel{background-size:cover;background-position:50%;background-repeat:no-repeat;height:400px;border-radius:15px;color:#fff;cursor:pointer;width:110px;margin:5px;position:relative;transition:width .2s ease-in}.panel h5{color:#fff;transform:rotate(-90deg);transition:transform .2s ease}.panel h5.activeH5{display:none}.panel p{color:#fff;transform:rotate(-90deg);transition:transform .2s ease}.panel p.activeP{display:none}.panel.active{width:400px}.panel.active h5{transform:rotate(0deg);opacity:1}.panel.active h5.activeH5{display:block}.panel.active p{transform:rotate(0deg);opacity:1}.panel.active p.activeP{display:block}@media(max-width:900px){.panel{min-width:266px;display:flex;flex-direction:row}.panel h5{transform:rotate(0deg)}.panel h5.activeH5{display:block}.panel p{transform:rotate(0deg);opacity:1}.panel p.activeP{display:block}.panel:nth-of-type(4),.panel:nth-of-type(5){display:none}}.panel2{height:60%;width:100%;position:absolute;background:linear-gradient(180.29deg,rgba(0,0,0,0) .25%,#000000 158.88%);border-radius:15px;transition:transform .2s ease;bottom:0;display:flex;justify-content:space-between;flex-direction:column-reverse;padding:20px 20px 60px}.panel2.active2{align-items:flex-end;flex-direction:row;flex:6 1}@media(max-width:900px){.panel2{flex-direction:row;align-items:flex-end}.panel2 h5,.panel2 p{transform:rotate(0deg)}.panel2 p{opacity:1}.panel2 p.activeP{display:block}.panel2:nth-of-type(4),.panel2:nth-of-type(5){display:none}}