@media (max-width: 1100px) {
    .main-nav {
        gap: 2px;
    }

    .main-nav a {
        padding-inline: 11px;
    }

    .hero {
        gap: 24px;
    }

    .hero-statement {
        font-size: 34px;
    }

    .header-note {
        margin-left: 0;
    }

    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .split-section {
        gap: 25px;
    }

    .rank-columns {
        gap: 25px;
    }

    .rank-columns .mini-cover {
        width: 75px;
        flex-basis: 75px;
    }

    .topic-card a > div {
        padding: 18px;
    }

    .story-layout {
        gap: 30px;
        grid-template-columns: 1fr 280px;
    }
}

@media (max-width: 850px) {
    .container {
        width: calc(100% - 40px);
    }

    .header-note {
        display: none;
    }

    .main-nav {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .main-nav a {
        padding: 10px;
    }

    .main-nav a:last-child {
        margin-left: 0;
    }

    .hero {
        grid-template-columns: 1fr 1.15fr;
        gap: 20px;
    }

    .hero-statement {
        font-size: 30px;
    }

    .hero-caption {
        padding: 18px;
    }

    .hero-caption h2 {
        font-size: 20px;
    }

    .hero-actions {
        flex-wrap: wrap;
        gap: 15px;
    }

    .hero-foot {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split-section, .rank-columns, .story-layout {
        grid-template-columns: 1fr;
    }

    .topic-grid {
        grid-template-columns: 1fr;
    }

    .topic-card img {
        aspect-ratio: 16 / 9;
    }

    .city-feature {
        gap: 25px;
    }

    .city-feature h3 {
        font-size: 22px;
    }

    .travel-section {
        padding: 25px;
    }

    .travel-grid {
        gap: 16px;
    }

    .travel-story h3 {
        font-size: 16px;
    }

    .editor-grid {
        gap: 20px;
    }

    .about-section {
        gap: 30px;
    }

    .about-section h2 {
        font-size: 27px;
    }

    .subscribe-section {
        flex-wrap: wrap;
    }

    .subscribe-actions {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .subscribe-actions .status {
        grid-column: 1 / -1;
    }

    .footer-inner {
        flex-direction: column;
    }

    .footer-inner nav {
        grid-template-columns: repeat(4, 1fr);
    }

    .category-hero {
        padding: 25px;
        gap: 25px;
    }

    .category-hero h1 {
        font-size: 29px;
    }

    .category-hero p:not(.eyebrow) {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .container {
        width: calc(100% - 32px);
    }

    section {
        margin-block: 44px;
    }

    h2 {
        font-size: 22px;
    }

    .header-top {
        gap: 10px;
        padding-block: 16px;
        flex-wrap: wrap;
    }

    .brand {
        font-size: 21px;
    }

    .brand img {
        width: 37px;
        height: 37px;
    }

    .brand small {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .library-link {
        padding: 8px;
        font-size: 13px;
    }

    .library-link .icon {
        display: none;
    }

    .menu-toggle {
        display: block;
        font-size: 13px;
        padding: 8px;
    }

    .main-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-block: 10px;
    }

    .js-enabled .main-nav:not(.is-open) {
        display: none;
    }

    .main-nav a {
        justify-content: center;
        padding: 10px 3px;
    }

    .hero {
        grid-template-columns: 1fr;
        margin-top: 26px;
        gap: 24px;
    }

    .hero-copy {
        padding: 0;
    }

    .hero-statement {
        font-size: 35px;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .hero-actions {
        margin-block: 20px;
    }

    .hero-foot {
        gap: 18px;
    }

    .hero-feature > .cover {
        aspect-ratio: 16 / 9;
    }

    .hero-caption {
        padding: 20px;
    }

    .hero-caption h2 {
        font-size: 21px;
    }

    .discovery-strip {
        gap: 12px 18px;
        padding: 16px;
        justify-content: flex-start;
    }

    .discovery-strip > span {
        width: 100%;
    }

    .section-heading {
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 22px;
    }

    .section-heading .text-link {
        margin-top: 27px;
        font-size: 12px;
    }

    .eyebrow {
        letter-spacing: 1px;
    }

    .section-heading h2 {
        gap: 7px;
        font-size: 22px;
    }

    .section-heading h2 .icon {
        width: 21px;
        height: 21px;
    }

    .video-grid {
        gap: 24px 14px;
    }

    .grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-copy h3 {
        font-size: 15px;
        min-height: 44px;
    }

    .card-copy > .meta {
        flex-wrap: wrap;
        gap: 2px;
    }

    .card-copy .eyebrow span {
        display: none;
    }

    .quality {
        font-size: 12px;
        top: 6px;
        left: 6px;
        padding: 1px 5px;
    }

    .play-mark {
        width: 26px;
        height: 26px;
        bottom: 8px;
        left: 8px;
    }

    .duration {
        bottom: 8px;
        right: 7px;
    }

    .popular-panel {
        padding: 22px;
    }

    .list-row {
        gap: 10px;
    }

    .mini-cover {
        width: 72px;
        flex-basis: 72px;
    }

    .update-list .rank-score {
        display: none;
    }

    .list-row h3 {
        font-size: 14px;
    }

    .rank-number {
        font-size: 23px;
        min-width: 25px;
    }

    .rank-score {
        font-size: 18px;
        min-width: 48px;
    }

    .category-grid {
        gap: 10px;
    }

    .category-tile {
        padding: 16px 10px;
    }

    .category-tile h3 {
        font-size: 15px;
    }

    .category-tile p {
        min-height: 46px;
        font-size: 12px;
    }

    .travel-section {
        padding: 23px 18px;
    }

    .travel-grid, .city-feature, .editor-grid, .about-section, .category-hero {
        grid-template-columns: 1fr;
    }

    .travel-grid {
        gap: 28px;
    }

    .travel-story h3 {
        font-size: 20px;
    }

    .food-section .card-copy {
        padding: 12px;
    }

    .rank-columns .mini-cover {
        width: 68px;
        flex-basis: 68px;
    }

    .topic-card > a {
        grid-template-columns: .75fr 1fr;
    }

    .topic-card a > div {
        padding: 17px;
    }

    .topic-card h3 {
        font-size: 17px;
    }

    .topic-card p {
        font-size: 13px;
    }

    .editor-grid {
        gap: 30px;
    }

    .about-section {
        padding-top: 30px;
        gap: 24px;
    }

    .subscribe-section {
        padding: 23px;
        gap: 20px;
    }

    .subscribe-section > img {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .subscribe-section > div:first-of-type {
        flex-basis: 100%;
    }

    .subscribe-actions {
        grid-template-columns: 1fr;
    }

    .footer-inner nav {
        gap: 15px;
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: column;
        gap: 7px;
    }

    .category-hero {
        padding: 24px;
        gap: 24px;
    }

    .video-heading h1 {
        font-size: 27px;
    }

    .video-info {
        gap: 7px 14px;
        font-size: 13px;
    }

    .player-big {
        width: 57px;
        height: 57px;
    }

    .preview-label {
        left: 10px;
        top: 10px;
        font-size: 12px;
    }

    .scene-caption {
        bottom: 10px;
        left: 10px;
        right: 10px;
        font-size: 13px;
    }

    .player-controls {
        flex-wrap: wrap;
        padding: 12px;
        gap: 10px;
    }

    .player-progress {
        flex-basis: calc(100% - 140px);
    }

    .player-volume {
        width: 45px;
    }

    .player-fullscreen {
        margin-left: auto;
    }

    .story-body .lead {
        font-size: 17px;
    }

    .scene-gallery {
        grid-template-columns: 1fr;
    }

    .episode-nav {
        flex-direction: column;
    }

    .end-note {
        text-align: left;
    }

    .watch-actions {
        gap: 16px;
    }
}

@media (max-width: 360px) {
    .header-top {
        justify-content: space-between;
    }

    .library-link {
        margin-left: 0;
    }

    .hero-statement {
        font-size: 31px;
    }

    .rank-columns .mini-cover {
        display: none;
    }
}