@media (max-width: 1150px) {
    .topbar, .main-nav, main, .mobile-banner, footer {
        width: calc(100% - 48px);
    }
    .main-nav {
        gap: 27px;
    }
    .topbar {
        gap: 20px;
    }
    .device-link {
        display: none;
    }
    .cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .hero {
        min-height: 450px;
    }
    .hero-copy {
        left: 30px;
        max-width: 58%;
    }
    .mobile-banner {
        flex-wrap: wrap;
    }
    .mobile-actions {
        margin-left: 101px;
    }
    .rank-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .update-strip {
        flex-wrap: wrap;
    }
}
@media (max-width: 760px) {
    .topbar, .main-nav, main, .mobile-banner, footer {
        width: calc(100% - 32px);
    }
    .topbar {
        height: auto;
        min-height: 120px;
        padding: 18px 0 12px;
        flex-wrap: wrap;
        gap: 15px;
    }
    .brand {
        font-size: 21px;
    }
    .brand img {
        width: 37px;
        height: 37px;
    }
    .brand small {
        font-size: 10px;
        margin-top: 4px;
    }
    .history-link {
        margin-left: auto;
    }
    .search {
        order: 3;
        width: 100%;
        height: 40px;
    }
    .main-nav {
        gap: 26px;
        overflow-x: auto;
        height: 52px;
    }
    .main-nav .ico {
        display: none;
    }
    .hero {
        margin-top: 16px;
        min-height: 480px;
        aspect-ratio: auto;
    }
    .hero-copy {
        top: auto;
        left: 23px;
        right: 23px;
        bottom: 68px;
        max-width: none;
    }
    .hero-image {
        object-position: 65% center;
    }
    .slide::after {
        background: linear-gradient(0deg, #11171ffc 3%, #11171fe0 40%, #11171f20 100%);
    }
    .hero h2 {
        font-size: 36px;
        letter-spacing: 2px;
    }
    .hero-tags {
        margin: 11px 0 8px;
        font-size: 12px;
    }
    .hero-tagline {
        font-size: 16px;
    }
    .hero-summary {
        font-size: 13px;
    }
    .hero-buttons {
        margin-top: 20px;
        gap: 9px;
    }
    .hero-buttons .button {
        padding: 10px 18px;
    }
    .hero-controls {
        left: 23px;
        right: auto;
        bottom: 19px;
    }
    .quick-nav {
        gap: 12px 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 23px 0;
    }
    .quick-nav > a:nth-child(2) {
        border: 0;
    }
    .quick-nav > a {
        padding: 8px 0;
        font-size: 14px;
    }
    .page-intro {
        flex-wrap: wrap;
        gap: 4px 12px;
        margin-top: 25px;
    }
    .live-dot {
        display: none;
    }
    .page-intro h1 {
        font-size: 15px;
    }
    .page-intro p {
        font-size: 12px;
    }
    .shelf {
        margin: 28px 0 36px;
    }
    .section-head {
        gap: 10px;
        margin-bottom: 16px;
    }
    h2 {
        font-size: 21px;
    }
    .section-head p {
        font-size: 12px;
    }
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px 12px;
    }
    .meta > span {
        display: none;
    }
    .editorial-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        margin: 32px 0;
    }
    .feature-panel, .ranking-panel {
        padding: 23px;
    }
    .feature-panel h2 {
        font-size: 26px;
    }
    .update-strip {
        gap: 20px;
        margin: 30px 0;
    }
    .update-strip > div {
        width: 100%;
    }
    .update-strip ol {
        gap: 14px;
    }
    .about-block h2 {
        font-size: 26px;
    }
    .mobile-banner {
        gap: 18px;
        padding: 22px;
        align-items: flex-start;
    }
    .mobile-banner > img {
        width: 53px;
        height: 53px;
        flex-basis: 53px;
    }
    .mobile-banner > div:nth-child(2) {
        flex: 1;
        min-width: 0;
    }
    .mobile-banner h2 {
        font-size: 19px;
    }
    .mobile-actions {
        margin: 0;
        width: 100%;
        flex-wrap: wrap;
    }
    .mobile-actions .button {
        padding: 10px 15px;
    }
    .footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 25px 12px;
    }
    .footer-main > div:first-child {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 6px;
    }
    .category-header h1, .info-page h1 {
        font-size: 30px;
    }
    .category-header p {
        font-size: 14px;
    }
    .detail-hero {
        grid-template-columns: 130px minmax(0, 1fr);
        padding: 20px;
        gap: 20px;
    }
    .detail-poster {
        width: 130px;
    }
    .detail-copy h1 {
        font-size: 27px;
        overflow-wrap: anywhere;
    }
    .detail-tagline {
        font-size: 14px;
    }
    .facts {
        grid-template-columns: 1fr;
        gap: 8px;
        font-size: 13px;
    }
    .facts > div {
        flex-direction: column;
        gap: 2px;
    }
    .detail-copy .hero-buttons .button {
        padding: 10px 13px;
    }
    .stills {
        gap: 10px;
        grid-template-columns: 1fr;
    }
    .rank-columns {
        grid-template-columns: 1fr;
    }
    .adjacent {
        flex-direction: column;
    }
    .episode {
        padding: 9px 17px;
    }
    .text-panel, .episode-panel {
        padding: 20px;
    }
    .info-page {
        margin: 35px 0 60px;
    }
}
@media (max-width: 480px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 13px;
    }
    .detail-hero {
        grid-template-columns: 1fr;
    }
    .detail-poster {
        width: 160px;
    }
    .facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .section-head {
        flex-wrap: wrap;
    }
    .update-strip ol {
        flex-basis: 100%;
    }
    .hero-copy {
        left: 19px;
        right: 19px;
    }
}