html{height:100vh}body{padding:0;margin:0;width:100%;overflow-x:hidden}.accordion{width:90%;max-width:1536px;height:320px;margin:20px auto;display:flex;flex-direction:row;cursor:pointer}.box{position:relative;height:100%;flex:1;min-width:20px;background-position:100%;background-size:cover;transition:.7s;border-right:4px solid;overflow:hidden}.box:hover{flex:5}.a1{flex:3}.a1 .text-container{opacity:1}.accordion:hover .box{flex:1}.accordion:hover .box .text-container{opacity:0}.accordion .box:hover{flex:4}.accordion .box:hover .text-container{opacity:1}.a1{border-right-color:#fbb22e}.a2{border-right-color:#a25f9d}.a3{border-right-color:#0286c3}.a4{border-right-color:#ee2f4d}.a5{border-right-color:#168c39}.text-container{position:absolute;opacity:0;padding:10px}.box:hover .text-container{opacity:1}.accordion .box-image{opacity:0;transition:opacity .3s ease-out 0s}.accordion .a1 .box-image{opacity:1}.accordion:hover .box .box-image{opacity:0;transition:opacity .3s}.accordion .box:hover .box-image{opacity:1;transition:opacity .3s ease-in .3s}.accordion .a1 .border-header{opacity:0}.accordion:hover .a1 .border-header{opacity:1}.a1:hover .border-header{opacity:0!important}.box:hover .border-header{opacity:0;transition:opacity .3s ease}@media screen and (max-width:768px){body{margin:0}.accordion{width:90%;flex-direction:column;height:774px;box-shadow:none;margin:20px auto}.box{box-shadow:none;flex:1;min-height:0;background-position:0;border-right:none}.accordion .box .border-header{opacity:1!important;transition:none}.a1{flex:3}.a1 .text-container{opacity:1}.text-container{position:absolute;opacity:0;padding:10px}.box:hover .border-header,.box:hover .text-container{opacity:1}.accordion .box .box-image{opacity:0;transition:opacity .3s ease-out}.accordion .a1 .box-image{opacity:1}.accordion .box:hover .box-image{opacity:1;transition:opacity .2s ease-in .45s}.accordion:not(:hover) .box .box-image{opacity:0;transition:opacity 0s}}