.compete{width:100%;margin:0 auto}.compete .role{z-index:3;width:20%;min-width:260px;position:relative}.compete .role img{width:calc(100% + 300px);position:absolute;top:0}.compete .role.r_J img{left:-20%}.compete .role.r_E img{right:-30%}.compete .heroCard{z-index:2;margin-top:10%;position:relative}.compete .heroCard ul{width:100%}.compete .heroCard ul>li{width:30%;max-width:150px;padding:5px}.compete .heroCard ul>li .hero{z-index:0;width:100%;position:relative}.compete .heroCard ul>li .hero img{width:100%}.compete .heroCard ul>li .frame{z-index:1;display:none;position:absolute;top:0;left:0}.compete .heroCard ul>li .ethnicName{opacity:0;text-align:center;z-index:2;background:linear-gradient(90deg,#f2e69400 0%,#100e0a 50%,#f2e69400 100%);padding:5px;position:absolute;bottom:20%;left:0;right:0}.compete .heroCard .Justice ul>li .ethnicName{background:linear-gradient(90deg,#f2e69400 0%,#e69e0e 50%,#f2e69400 100%)}.compete .heroCard .Evil ul>li .ethnicName{background:linear-gradient(90deg,#f2e69400 0%,#26052f 50%,#f2e69400 100%)}.compete .heroCard ul>li:hover .ethnicName{opacity:1}.compete .heroCard ul>li .ethnicName h4{color:var(--bw6);font-size:22px}.compete .heroCard ul.Justice>li .card{background:var(--a_1)}.compete .heroCard ul.Evil>li .card{background:var(--b_1)}.foreground{left:0;right:0}.EmblemShading{z-index:0;width:50%;top:-25%}.EmblemShading img{opacity:.1;width:100%}.e_J.EmblemShading{left:-10%}.e_E.EmblemShading{right:-10%}@media (max-width:1600px){.compete .role img{width:190%;position:absolute;top:0}}@media (max-width:950px){.foreground{height:20%;max-height:260px}.compete .role img{width:80%;position:absolute;top:0}.compete .role{min-width:360px;position:absolute}.compete .role.role.r_J{left:-35%}.compete .role.role.r_E{right:-35%}}