/* Pixso 646:332 desktop / 646:626 phone. Album panels follow v2 About Us. */
.v2-media { --v2-font-body: 'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; --v2-font-display: 'Alimama ShuHeiTi', var(--v2-font-body); margin: 0; background: #0e2755; color: #fff; font-family: var(--v2-font-body); }
.mx-media, .mx-media * { box-sizing: border-box; font-family: inherit; }
.mx-media h1, .mx-media h3, .mx-media p { margin: 0; }
.mx-media a { color: inherit; text-decoration: none; }
.mx-media a:focus-visible { outline: 3px solid #ffde90; outline-offset: 5px; }
.mx-media [id] { scroll-margin-top: calc(var(--hx-header-h) + 20px); }
.mx-hero { width: 100%; aspect-ratio: 1921 / 552; background: url('../images/media-list-hero-desktop.webp') center / 100% 100% no-repeat; }
.mx-albums { position: relative; width: calc(1679 * var(--desktop-unit)); max-width: 100%; margin: calc(-52 * var(--desktop-unit)) auto 0; padding-bottom: calc(152 * var(--desktop-unit)); }
.mx-albums h1 { color: #ffde90; font-family: var(--v2-font-display); font-size: calc(50 * var(--desktop-unit)); font-weight: 700; line-height: calc(60 * var(--desktop-unit)); text-align: center; }
.mx-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(20 * var(--desktop-unit)); margin-top: calc(46 * var(--desktop-unit)); }
.mx-categories a { display: flex; justify-content: center; align-items: center; min-width: calc(190 * var(--desktop-unit)); min-height: calc(55 * var(--desktop-unit)); padding: calc(10 * var(--desktop-unit)) calc(20 * var(--desktop-unit)); border-radius: calc(10 * var(--desktop-unit)); background: linear-gradient(110deg, #329aff, #3d82a4); font-size: max(12px, calc(21 * var(--desktop-unit))); font-weight: 600; line-height: 1.428572; letter-spacing: calc(3 * var(--desktop-unit)); text-align: center; overflow-wrap: anywhere; }
.mx-categories a[aria-current] { background: linear-gradient(110deg, #f3dfba, #ccaa6a); color: #082d76; box-shadow: 0 calc(2 * var(--desktop-unit)) calc(3 * var(--desktop-unit)) #402e0e; }
.mx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(41 * var(--desktop-unit)) calc(37 * var(--desktop-unit)); margin-top: calc(93 * var(--desktop-unit)); }
.mx-grid .ax-media-card { min-width: 0; padding: calc(10 * var(--desktop-unit)) calc(10 * var(--desktop-unit)) 0; border-radius: calc(10 * var(--desktop-unit)); background: #4673c630; }
.mx-grid .ax-media-link { display: block; }
.mx-grid .ax-media-image { display: block; width: calc(513 * var(--desktop-unit)); max-width: 100%; aspect-ratio: 513 / 335; object-fit: cover; border-radius: calc(10 * var(--desktop-unit)); }
.mx-grid .mx-missing-cover { background: #25497c; }
.mx-grid .ax-media-copy { position: relative; width: calc(472 * var(--desktop-unit)); max-width: 100%; min-height: calc(99 * var(--desktop-unit)); margin: calc(-39 * var(--desktop-unit)) 0 0 calc(20 * var(--desktop-unit)); padding: calc(25 * var(--desktop-unit)) calc(20 * var(--desktop-unit)) calc(17 * var(--desktop-unit)); border-radius: calc(20 * var(--desktop-unit)) calc(20 * var(--desktop-unit)) 0 0; background: #07338d; box-shadow: 0 calc(4 * var(--desktop-unit)) calc(4 * var(--desktop-unit)) #00000040; text-align: center; }
.mx-grid h3 { font-family: var(--v2-font-display); font-size: max(12px, calc(20 * var(--desktop-unit))); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; line-break: strict; }
.mx-grid .ax-highlight { color: #ffde90; }
.mx-grid .ax-media-copy p { margin-top: calc(12 * var(--desktop-unit)); font-family: 'Alibaba PuHuiTi', var(--v2-font-body); font-size: max(12px, calc(15 * var(--desktop-unit))); line-height: 1.4; }
.mx-empty { grid-column: 1 / -1; padding-block: calc(100 * var(--desktop-unit)); font-size: max(14px, calc(24 * var(--desktop-unit))); text-align: center; }
.mx-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(34 * var(--desktop-unit)); margin-top: calc(86 * var(--desktop-unit)); font-family: 'Alibaba PuHuiTi', var(--v2-font-body); font-size: max(12px, calc(20 * var(--desktop-unit))); line-height: 1.35; }
.mx-pagination a { display: grid; min-width: 28px; min-height: 28px; align-items: center; }
.mx-pagination [aria-current] { color: #ffde8c; }
.v2-media:lang(en-us) .mx-categories a { letter-spacing: normal; }
@media (max-width: 767px) {
    .v2-media { --mx-px: calc(100cqw / 750); }
    .mx-media { container-type: inline-size; }
    .mx-hero { aspect-ratio: 750 / 360; background-image: url('../images/media-list-hero-mobile.webp'); }
    .mx-albums { width: calc(664 * var(--mx-px)); margin: calc(-23 * var(--mx-px)) auto 0; padding-bottom: calc(114 * var(--mx-px)); }
    .mx-albums h1 { font-size: calc(50 * var(--mx-px)); line-height: calc(60 * var(--mx-px)); }
    .mx-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: calc(682 * var(--mx-px)); max-width: calc(100% + 18 * var(--mx-px)); margin: calc(44 * var(--mx-px)) calc(-7 * var(--mx-px)) 0; gap: calc(16 * var(--mx-px)); }
    .mx-categories a { min-width: 0; min-height: calc(55 * var(--mx-px)); padding: calc(10 * var(--mx-px)) calc(6 * var(--mx-px)); border-radius: calc(10 * var(--mx-px)); font-size: calc(23 * var(--mx-px)); line-height: calc(33 * var(--mx-px)); letter-spacing: calc(3 * var(--mx-px)); }
    .mx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(40 * var(--mx-px)) calc(18 * var(--mx-px)); margin-top: calc(55 * var(--mx-px)); }
    .mx-grid .ax-media-card { padding: calc(10 * var(--mx-px)) calc(10 * var(--mx-px)) 0; border-radius: calc(10 * var(--mx-px)); }
    .mx-grid .ax-media-card:first-child { grid-column: 1 / -1; }
    .mx-grid .ax-media-image { width: 100%; aspect-ratio: 645 / 357; border-radius: calc(6 * var(--mx-px)); }
    .mx-grid .ax-media-copy { width: 94%; min-height: calc(50 * var(--mx-px)); margin: calc(-36 * var(--mx-px)) auto 0; padding: calc(12 * var(--mx-px)) calc(6 * var(--mx-px)); border-radius: calc(10 * var(--mx-px)) calc(10 * var(--mx-px)) 0 0; }
    .mx-grid h3 { font-size: calc(13 * var(--mx-px)); line-height: calc(16 * var(--mx-px)); }
    .mx-grid .ax-media-copy p { margin-top: calc(6 * var(--mx-px)); font-size: calc(12 * var(--mx-px)); line-height: calc(17 * var(--mx-px)); }
    .mx-grid .ax-media-card:first-child .ax-media-copy { min-height: calc(99 * var(--mx-px)); margin-top: calc(-62 * var(--mx-px)); padding: calc(15 * var(--mx-px)) calc(20 * var(--mx-px)) calc(17 * var(--mx-px)); }
    .mx-grid .ax-media-card:first-child h3 { font-size: calc(25 * var(--mx-px)); line-height: calc(30 * var(--mx-px)); }
    .mx-grid .ax-media-card:first-child p { margin-top: calc(12 * var(--mx-px)); font-size: calc(18 * var(--mx-px)); line-height: calc(25 * var(--mx-px)); }
    .mx-empty { padding-block: calc(100 * var(--mx-px)); font-size: calc(24 * var(--mx-px)); }
    .mx-pagination { gap: calc(34 * var(--mx-px)); margin-top: calc(70 * var(--mx-px)); font-size: calc(20 * var(--mx-px)); }
}