.champions-banner{padding:0 0 40px}@media(min-width:500px){.champions-banner{padding:0}}.champions-banner h1,.champions-banner .description{max-width:1024px}.champions-banner .description{font-size:1rem}@media(min-width:500px){.champions-banner .description{font-size:1.5rem}}.champions-list{padding:30px 0 60px}@media(min-width:500px){.champions-list{padding:40px 0 60px}}.champions-list .champions-list-items{display:grid;gap:20px}@media(min-width:400px){.champions-list .champions-list-items{grid-template-columns:repeat(2,1fr)}}@media(min-width:700px){.champions-list .champions-list-items{gap:40px;grid-template-columns:repeat(3,1fr)}}@media(min-width:960px){.champions-list .champions-list-items{grid-template-columns:repeat(4,1fr)}}.champions-list .champions-list-item{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}@media(min-width:780px){.champions-list .champions-list-item{gap:16px}}.champions-list .champions-list-item:hover .image-wrapper::before,.champions-list .champions-list-item:hover .image-wrapper::after{opacity:1}.champions-list .champions-list-item:hover img.photo{opacity:.75;filter:grayscale(100%);-webkit-filter:grayscale(100%)}.champions-list .champions-list-item:hover h2{color:#00bac2}.champions-list .champions-list-item .image-wrapper{aspect-ratio:1;width:100%;border-radius:6px;overflow:hidden;position:relative}.champions-list .champions-list-item .image-wrapper::before,.champions-list .champions-list-item .image-wrapper::after{content:'';position:absolute;inset:0;opacity:0;transition:.3s ease opacity;z-index:1;border-radius:6px}.champions-list .champions-list-item .image-wrapper::before{background:#f2f4fe;mix-blend-mode:darken}.champions-list .champions-list-item .image-wrapper::after{background:#361e5b;mix-blend-mode:lighten}.champions-list .champions-list-item img.photo{display:block;width:100%;height:auto;object-fit:fill;transition:.3s ease opacity,.3s ease filter}.champions-list .champions-list-item img.flag{position:absolute;right:10px;top:10px;z-index:10;box-shadow:0 2px 3px rgba(41,26,63,.2)}.champions-list .champions-list-item h2{line-height:1.3;transition:color .2s ease;font-size:1.125rem}@media(min-width:780px){.champions-list .champions-list-item h2{font-size:1.25rem}}.champion-header{padding-bottom:30px}.champion-header .back-link{display:flex;gap:8px;align-items:center;text-decoration:none;font-weight:600}.champion-header .back-link svg{transform:rotate(90deg)}.champion-content{padding-bottom:100px}.champion-content .container{display:flex;gap:50px;flex-direction:column}@media(min-width:760px){.champion-content .container{flex-direction:row;gap:50px}}.champion-content .profile{display:flex;flex-direction:column;gap:20px;flex:0 0 280px;align-items:flex-start}@media(min-width:400px) and (max-width:759px){.champion-content .profile{flex-direction:row-reverse}.champion-content .profile .profile-content{flex:1 1 50%}.champion-content .profile .image-wrapper{flex:1 1 50%}}.champion-content .profile .profile-content{display:flex;flex-direction:column;gap:20px}.champion-content .profile .image-wrapper{width:100%;aspect-ratio:1;overflow:hidden;border-radius:6px;position:relative}.champion-content .profile .image-wrapper img.photo{width:100%;height:auto;object-fit:cover}.champion-content .profile h1{font-size:1.25rem;margin:0}@media(min-width:780px){.champion-content .profile h1{font-size:1.5rem}}.champion-content .profile h2{font-size:.875rem;margin:0}@media(min-width:780px){.champion-content .profile h2{font-size:1rem}}.champion-content .profile .country{display:flex;align-items:center;gap:10px;margin-top:10px;font-weight:500}.champion-content .profile .country img.flag{box-shadow:0 0 3px rgba(41,26,63,.2)}.champion-content .profile .languages{display:flex;flex-direction:column;gap:10px}.champion-content .profile .language{display:grid;grid-template-columns:20px auto;gap:10px;align-items:center;font-weight:500}.champion-content .profile .language img{height:20px;width:auto;justify-self:center}.champion-content .profile .social{display:flex;flex-direction:column;gap:10px}.champion-content .profile .social-links{display:flex;flex-direction:column;gap:8px}.champion-content .profile .social-link{display:grid;grid-template-columns:20px auto;gap:10px;align-items:center}.champion-content .profile .social-link img{height:20px;width:auto;justify-self:center}.champion-content .longform-content p+h2{margin-top:2.5rem}.champion-content .longform-content h2+h3{margin-top:1rem}.champion-content .longform-content h3+p{margin-top:.25rem}.champion-content .longform-content p{font-size:1.125rem}