@media (max-width: 1279px) {
    .site-navbar-shell {
        width: min(1400px, calc(100% - 20px));
    }

    .nav-wrapper {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .nav-wrapper::-webkit-scrollbar {
        display: none;
    }

    .site-skin {
        display: none !important;
    }
}

@media (max-width: 1060px) {
    .frontend-main {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 20px !important;
        padding-bottom: 104px !important;
    }

    .frontend-footer {
        margin-top: 20px;
    }

    .home-container,
    .frontend-page-shell {
        padding-left: 0;
        padding-right: 0;
    }

    .category-main-section,
    .home-main-section,
    section[style*="grid-template-columns:720px 320px"],
    section[style*="grid-template-columns:750px 290px"],
    div[style*="grid-template-columns:720px 320px"],
    div[style*="grid-template-columns:750px 290px"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        height: auto !important;
        gap: 16px !important;
    }

    .category-main-left,
    .category-main-right,
    .home-main-left,
    .home-main-right,
    aside[style*="width:320px"],
    div[style*="width:720px"],
    div[style*="width:750px"],
    div[style*="width:660px"],
    div[style*="width:380px"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    .category-sidebar-sticky {
        position: static !important;
        top: auto !important;
        gap: 16px !important;
    }

    .category-popular-stack,
    .category-ad-stack {
        gap: 16px !important;
    }

    section[style*="height:460px;width:100%"],
    section[style*="height:460px; width:100%"],
    section[style*="height:402px;width:100%"],
    section[style*="height:402px; width:100%"],
    section[style*="height:330px;margin-top:24px"] {
        height: auto !important;
    }

    #top-slider,
    #eco-top-slider,
    #sports-top-slider {
        border-radius: var(--frontend-radius);
        overflow: hidden;
        height: 360px  !important;
        touch-action: none;
        overscroll-behavior: contain;
    }

    #top-track,
    #eco-top-track,
    #sports-top-track,
    #top-track .snap-center,
    #eco-top-track .snap-center,
    #sports-top-track .snap-center,
    #top-track .snap-center > .top-showcase-slide,
    #eco-top-track .snap-center > .top-showcase-slide,
    #sports-top-track .snap-center > .top-showcase-slide {
        height: 100% !important;
    }

    #top-track .snap-center > div,
    #eco-top-track .snap-center > div,
    #sports-top-track .snap-center > div {
        flex-direction: column;
        height: 100% !important;
    }

    #top-track .snap-center > div > div:first-child,
    #eco-top-track .snap-center > div > div:first-child,
    #sports-top-track .snap-center > div > div:first-child {
        display: none !important;
    }

    #top-track .snap-center > div > div:last-child,
    #eco-top-track .snap-center > div > div:last-child,
    #sports-top-track .snap-center > div > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        flex: 1 1 auto !important;
        height: 100% !important;
    }

    #top-track .snap-center > div > div:last-child,
    #eco-top-track .snap-center > div > div:last-child,
    #sports-top-track .snap-center > div > div:last-child {
        height: 100% !important;
    }

    #top-track svg,
    #eco-top-track svg,
    #sports-top-track svg {
        display: none;
    }

    div[style*="grid-template-columns:repeat(5, 1fr)"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    div[style*="grid-template-columns:repeat(4,1fr)"],
    div[style*="grid-template-columns:repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    div[style*="grid-template-columns:repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    div[style*="display:grid;grid-template-columns:360px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .stream-feed-card,
    .stream-feed-link,
    .stream-feed-inner {
        height: auto !important;
    }

    .stream-feed-inner {
        flex-direction: column !important;
    }

    .stream-feed-media {
        width: 100% !important;
        height: 220px !important;
        flex-basis: auto !important;
    }

    .stream-feed-content {
        height: auto !important;
        padding: 16px !important;
    }

    .stream-feed-title {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    .stream-feed-summary {
        font-size: 14px !important;
        -webkit-line-clamp: 3 !important;
    }

    .ck-content-prose {
        font-size: 1rem;
        line-height: 1.75;
        word-break: break-word;
    }

    .ck-content-prose h2 {
        font-size: 1.5rem;
    }

    .ck-content-prose h3 {
        font-size: 1.25rem;
    }

    .ck-content-prose table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #search-overlay {
        padding-top: 6vh;
    }

    #search-panel {
        margin: 0 10px;
        max-width: none;
        border-radius: 6px;
    }

    .search-input-wrap input {
        font-size: 18px;
        padding: 18px 18px 18px 0;
    }

    .search-icon-wrap,
    .search-suggestions {
        padding-left: 18px;
        padding-right: 18px;
    }

    #drawer-panel {
        width: min(88vw, 320px);
        max-width: min(88vw, 320px);
        left: 0;
    }

    .drawer-anim-active #drawer-panel {
        transform: translateX(0);
    }

    .popup-ad-panel {
        width: min(96vw, 760px);
        padding: 12px;
    }

    .breaking-card {
        height: 292px !important;
    }

    .breaking-card-media {
        height: 168px !important;
    }

    .breaking-card-media img {
        height: 168px !important;
    }

    .home-section-card {
        height: 278px !important;
    }

    .home-section-card-media {
        height: 188px !important;
    }

    .home-section-card-media img {
        height: 188px !important;
    }

    #top-track .snap-center > .top-showcase-slide,
    #eco-top-track .snap-center > .top-showcase-slide,
    #sports-top-track .snap-center > .top-showcase-slide {
        position: relative !important;
        display: block !important;
        height: 360px !important;
        overflow: hidden !important;
    }

    #top-track .top-showcase-copy,
    #eco-top-track .top-showcase-copy,
    #sports-top-track .top-showcase-copy {
        display: none !important;
    }

    #top-track .top-showcase-media,
    #eco-top-track .top-showcase-media,
    #sports-top-track .top-showcase-media {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        margin-left: 0 !important;
        flex: 1 1 auto !important;
    }

    #top-track .top-showcase-media img,
    #eco-top-track .top-showcase-media img,
    #sports-top-track .top-showcase-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    #top-track .top-showcase-media-overlay,
    #eco-top-track .top-showcase-media-overlay,
    #sports-top-track .top-showcase-media-overlay {
        display: none !important;
    }

    #top-track,
    #eco-top-track,
    #sports-top-track {
        display: flex !important;
        flex-direction: column !important;
    }
}

@media (max-width: 767px) {
    .site-navbar {
        padding: 8px 0;
    }

    .site-navbar-shell {
        width: calc(100% - 16px);
        border-radius: 6px;
    }

    .site-navbar-inner {
        min-height: 68px;
        padding: 10px 12px;
        gap: 10px;
    }

    .site-navbar-brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    .site-navbar-badge {
        display: none;
    }

    .site-navbar-logo-image {
        height: 34px;
    }

    .site-navbar-logo-text {
        font-size: 1.2rem;
    }

    .site-action-btn {
        min-height: 42px;
        min-width: 42px;
        padding: 0 12px;
    }

    .site-action-btn--menu span {
        display: none;
    }

    .nav-link-item {
        font-size: 12px;
        min-height: 38px;
        padding: 0 12px;
    }

    .economy-subnav {
        padding: 18px;
        border-radius: 6px;
    }

    .economy-subnav__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .economy-subnav__title {
        font-size: 20px;
    }

    .economy-subnav__text {
        max-width: none;
    }

    .economy-subnav__grid {
        grid-template-columns: 1fr;
    }

    .frontend-main {
        min-height: calc(100vh - 180px) !important;
    }

    main article[style*="padding:22px"] {
        padding: 16px !important;
        border-radius: 6px !important;
    }

    main h1[style*="font-size:38px"] {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    figure[style*="margin-top:24px; position:relative"] > div[style*="position:absolute; bottom:0"] {
        position: static !important;
        background: #fff !important;
        border-top: 1px solid #e5e7eb !important;
        padding: 14px 16px !important;
    }

    div[style*="display:grid;grid-template-columns:repeat(5, 1fr)"],
    div[style*="display:grid;grid-template-columns:repeat(4,1fr)"],
    div[style*="display:grid;grid-template-columns:repeat(4, 1fr)"],
    div[style*="display:grid;grid-template-columns:repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .related-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .frontpage-canvas-frame {
        margin-left: -4px;
        margin-right: -4px;
    }

    .breaking-card {
        height: 286px !important;
    }

    .breaking-card-media {
        height: 176px !important;
    }

    .breaking-card-media img {
        height: 176px !important;
    }

    .breaking-card-content {
        padding: 12px !important;
        gap: 8px !important;
    }

    .breaking-card-title {
        font-size: 15px !important;
    }

    #sports-news-grid,
    #economy-news-grid {
        grid-template-columns: 1fr !important;
    }

    #sports-news-grid > a:nth-child(n+7),
    #economy-news-grid > a:nth-child(n+7) {
        display: none !important;
    }

    .home-section-card {
        height: auto !important;
        min-height: 0 !important;
        border-radius: 6px !important;
    }

    .home-section-card-media {
        height: 208px !important;
    }

    .home-section-card-media img {
        height: 208px !important;
    }

    .home-section-card-content {
        padding: 12px !important;
        gap: 8px !important;
    }

    .home-section-card-title {
        font-size: 15px !important;
    }

    .sports-standings-cards {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 112px !important;
        grid-template-columns: none !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 2px 12px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        align-items: stretch !important;
    }

    .sports-standings-card {
        position: relative;
        height: 116px !important;
        padding: 10px 10px 12px !important;
        border-radius: 6px !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0 !important;
        background:
            radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 44%),
            linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08) !important;
        scroll-snap-align: start;
    }

    .sports-standings-card::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, #16a34a 0%, rgba(22, 163, 74, 0.08) 100%);
        opacity: 0.9;
    }

    .sports-standings-logo {
        width: 34px !important;
        height: 34px !important;
        margin-top: 8px !important;
        border-radius: 5px;
        background: #ffffff;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }

    .sports-standings-logo img {
        width: 24px !important;
        height: 24px !important;
    }

    .sports-standings-points {
        margin-top: auto !important;
        font-size: 24px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        color: #0f172a !important;
        letter-spacing: -0.04em;
    }

    .sports-standings-name {
        padding: 0 !important;
        margin-top: 4px !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        color: #475569 !important;
        text-align: left !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        min-height: calc(1.15em * 2) !important;
    }

    #economy-widget-grid {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(168px, 76vw) !important;
        grid-template-columns: none !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 2px 10px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .economy-widget-card {
        min-height: 132px !important;
        border-radius: 6px !important;
        padding: 14px !important;
        background:
            radial-gradient(circle at top left, rgba(104, 161, 255, 0.12), transparent 42%),
            linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
        scroll-snap-align: start;
    }

    .sports-standings-cards::-webkit-scrollbar,
    #economy-widget-grid::-webkit-scrollbar {
        display: none;
    }

    .sports-standings-cards,
    #economy-widget-grid {
        scrollbar-width: none;
    }
}