@media (min-width: 1600px) {
    .hero, .slide {
        min-height: 550px;
    }
}

@media (max-width: 1100px) {
    .wrap {
        width: calc(100% - 48px);
    }
    .navigation {
        gap: 25px;
    }
    .header-tools a:last-child {
        display: none;
    }
    .card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .hero-copy {
        padding-left: 40px;
    }
    .hero-controls {
        left: 40px;
    }
    .mobile-banner {
        flex-wrap: wrap;
    }
    .episodes {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .wrap {
        width: calc(100% - 32px);
    }
    .topbar {
        flex-wrap: wrap;
        gap: 16px;
        padding: 20px 0 14px;
    }
    .brand {
        font-size: 23px;
    }
    .brand img {
        width: 34px;
        height: 34px;
    }
    .search-form {
        width: 100%;
        order: 3;
    }
    .header-tools {
        margin-left: auto;
    }
    .navigation {
        gap: 24px;
    }
    .navigation a {
        font-size: 14px;
    }
    .navigation .icon {
        display: none;
    }
    .hero {
        margin-top: 16px;
    }
    .hero, .slide {
        min-height: 470px;
    }
    .slide > img {
        object-position: 65% center;
    }
    .slide::after {
        background: linear-gradient(0deg, #09111bf5, #09111b55 85%);
    }
    .hero-copy {
        align-self: end;
        padding: 100px 24px 78px;
        max-width: 100%;
    }
    .hero h2 {
        font-size: 36px;
    }
    .hero .alias {
        font-size: 12px;
        letter-spacing: 3px;
    }
    .hero-copy p {
        font-size: 14px;
    }
    .hero-controls {
        left: 24px;
        right: 24px;
        bottom: 22px;
    }
    .quickbar {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 0;
    }
    .quickbar a:nth-child(2) {
        border: 0;
    }
    .quickbar a {
        gap: 10px;
        font-size: 14px;
    }
    .section {
        margin-top: 32px;
    }
    .section-head h2 {
        font-size: 21px;
    }
    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px 12px;
    }
    .rank-grid, .feature-grid {
        grid-template-columns: 1fr;
    }
    .feature-card {
        aspect-ratio: 2.3 / 1;
    }
    .about-box {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .mobile-banner {
        padding: 24px;
        gap: 20px;
    }
    .mobile-banner .app-mark {
        width: 48px;
        height: 48px;
    }
    .mobile-banner h2 {
        font-size: 20px;
    }
    .mobile-banner .actions {
        width: 100%;
    }
    .footer-top {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .footer-top > div:first-child {
        grid-column: 1 / -1;
    }
    .copyright {
        flex-direction: column;
        gap: 8px;
    }
    .detail-top {
        grid-template-columns: 110px minmax(0, 1fr);
        padding: 20px;
        gap: 20px;
    }
    .detail-top h1 {
        font-size: 25px;
    }
    .detail-top dl, .detail-top .actions {
        grid-column: 1 / -1;
    }
    .detail-info {
        display: contents;
    }
    .detail-heading {
        min-width: 0;
    }
    .episodes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }
    .stills {
        grid-template-columns: 1fr;
    }
    .text-panel {
        padding: 20px;
    }
    .page-title {
        font-size: 26px;
    }
}

@media (max-width: 440px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
    }
    .hero h2 {
        font-size: 32px;
    }
    .hero .actions .button {
        padding: 9px 13px;
        font-size: 14px;
    }
    .mobile-banner .button, .mobile-banner button {
        padding: 9px 13px;
        font-size: 14px;
    }
}