/* =========================================================
   OSV MOBILE HOMEPAGE — DESKTOP FREEZE
   Everything in this file is MOBILE ONLY.
   ========================================================= */

@media (max-width: 768px) {

    /* ---------------------------------------------
       1. WATCH / BROWSE / CHART / FIND
       --------------------------------------------- */

    .osv-clean-nav-strip {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        flex-wrap: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        padding-bottom: 8px !important;

        scrollbar-width: none;
    }

    .osv-clean-nav-strip::-webkit-scrollbar {
        display: none;
    }

    .osv-clean-nav-strip > a {
        flex: 0 0 155px !important;
        min-width: 155px !important;
        scroll-snap-align: start;
    }


    /* ---------------------------------------------
       2. LATEST FROM THE BLOG
       Turn lead + side stories into one swipe rail.
       --------------------------------------------- */

    .osv-blog-feature-grid {
        display: flex !important;
        grid-template-columns: none !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        align-items: stretch !important;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        padding-bottom: 10px !important;

        scrollbar-width: none;
    }

    .osv-blog-feature-grid::-webkit-scrollbar {
        display: none;
    }

    .osv-blog-lead {
        flex: 0 0 82vw !important;
        width: 82vw !important;
        max-width: 340px !important;
        scroll-snap-align: start;
    }

    .osv-blog-side {
        display: contents !important;
    }

    .osv-blog-small {
        flex: 0 0 76vw !important;
        width: 76vw !important;
        max-width: 315px !important;
        scroll-snap-align: start;
    }


    /* ---------------------------------------------
       3. BROWSE BY DECADE
       --------------------------------------------- */

    .osv-clean-decade-strip {
        display: flex !important;
        grid-template-columns: none !important;

        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        flex-wrap: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        padding-bottom: 8px !important;

        scrollbar-width: none;
    }

    .osv-clean-decade-strip::-webkit-scrollbar {
        display: none;
    }

    .osv-clean-decade-strip > a {
        flex: 0 0 155px !important;
        min-width: 155px !important;
        scroll-snap-align: start;
    }


    /* ---------------------------------------------
       4. TOP ARTISTS
       --------------------------------------------- */

    .osv-top-artists-section .osv-artist-circles {
        display: flex !important;
        grid-template-columns: none !important;

        gap: 18px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        flex-wrap: nowrap !important;

        justify-content: flex-start !important;

        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;

        padding: 4px 2px 12px !important;

        scrollbar-width: none;
    }

    .osv-top-artists-section .osv-artist-circles::-webkit-scrollbar {
        display: none;
    }

    .osv-top-artists-section .osv-artist-circle-card {
        flex: 0 0 118px !important;
        width: 118px !important;
        min-width: 118px !important;

        scroll-snap-align: start;
    }

}


/* =========================================================
   OSV MOBILE HAMBURGER MENU
   DESKTOP FREEZE — MAX 768PX ONLY
   ========================================================= */

.osv-mobile-menu-button{
    display:none;
}

@media (max-width:768px){

    .header{
        position:relative !important;
        z-index:10000 !important;
    }

    .header .header-row{
        position:relative !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        flex-wrap:wrap !important;
        min-height:64px !important;
    }

    /* Logo stays visible */
    .header .logo{
        flex:0 1 auto !important;
        margin:0 !important;
    }

    /* --------------------------
       Hamburger button
       -------------------------- */

    .osv-mobile-menu-button{
        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;
        gap:5px !important;

        width:44px !important;
        height:44px !important;

        padding:0 !important;
        margin-left:auto !important;

        border:0 !important;
        border-radius:10px !important;

        background:#111 !important;

        cursor:pointer !important;
        z-index:10002 !important;
    }

    .osv-mobile-menu-button span{
        display:block !important;
        width:21px !important;
        height:2px !important;

        background:#fff !important;
        border-radius:3px !important;

        transition:
            transform .2s ease,
            opacity .2s ease !important;
    }

    .osv-mobile-menu-open
    .osv-mobile-menu-button span:nth-child(1){
        transform:translateY(7px) rotate(45deg) !important;
    }

    .osv-mobile-menu-open
    .osv-mobile-menu-button span:nth-child(2){
        opacity:0 !important;
    }

    .osv-mobile-menu-open
    .osv-mobile-menu-button span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg) !important;
    }

    /* --------------------------
       Closed state
       -------------------------- */

    .header .search,
    .header .nav{
        display:none !important;
    }

    /* --------------------------
       Open dropdown
       -------------------------- */

    .header-row.osv-mobile-menu-open .search,
    .header-row.osv-mobile-menu-open .nav{
        display:flex !important;
    }

    .header-row.osv-mobile-menu-open .search{
        order:10 !important;

        width:100% !important;
        flex:0 0 100% !important;

        margin:14px 0 0 !important;
        padding:14px !important;

        background:#fff !important;

        border:1px solid rgba(0,0,0,.08) !important;
        border-radius:14px 14px 0 0 !important;

        box-shadow:
            0 14px 30px rgba(0,0,0,.12) !important;
    }

    .header-row.osv-mobile-menu-open .search input{
        min-width:0 !important;
        flex:1 1 auto !important;
    }

    .header-row.osv-mobile-menu-open .nav{
        order:11 !important;

        width:100% !important;
        flex:0 0 100% !important;

        flex-direction:column !important;
        align-items:stretch !important;

        gap:0 !important;

        padding:6px 14px 14px !important;

        background:#fff !important;

        border:
            1px solid rgba(0,0,0,.08) !important;
        border-top:0 !important;

        border-radius:0 0 14px 14px !important;

        box-shadow:
            0 18px 34px rgba(0,0,0,.14) !important;
    }

    .header-row.osv-mobile-menu-open .nav a{
        display:block !important;

        width:100% !important;

        padding:13px 5px !important;

        border-bottom:
            1px solid rgba(0,0,0,.07) !important;

        font-size:15px !important;
        font-weight:800 !important;

        text-decoration:none !important;
    }

    .header-row.osv-mobile-menu-open .nav a:last-child{
        border-bottom:0 !important;
    }
}


/* =========================================================
   OSV MOBILE SCREEN FIT V1
   Tighter mobile spacing / wider usable content
   DESKTOP REMAINS FROZEN
   ========================================================= */

@media (max-width:768px){

    /* -----------------------------------------------------
       MAIN PAGE WIDTH
       Reduce excessive left/right empty space.
       ----------------------------------------------------- */

    .shell,
    .home,
    .osv-shell{
        width:100% !important;
        max-width:none !important;

        padding-left:10px !important;
        padding-right:10px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    /* -----------------------------------------------------
       HOMEPAGE TV / VIDEO PLAYER
       Let it use almost the full phone width.
       ----------------------------------------------------- */

    .hero{
        width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .tv{
        width:100% !important;
        max-width:none !important;

        margin-left:0 !important;
        margin-right:0 !important;

        border-radius:16px !important;
    }

    .player-frame,
    .osv-tv-blur-frame{
        width:100% !important;
        max-width:none !important;

        border-radius:14px !important;
    }

    #osvTvFrame{
        width:100% !important;
        max-width:none !important;
    }


    /* -----------------------------------------------------
       PLAYER INFO / COMING UP
       Less wasted internal padding.
       ----------------------------------------------------- */

    .tv-meta,
    .osv-tv-panel-clean,
    .osv-home-player-info{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .osv-home-now-playing{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .osv-home-up-next{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .osv-upnext-row{
        padding-left:8px !important;
        padding-right:8px !important;
    }


    /* -----------------------------------------------------
       GENERAL HOMEPAGE SECTIONS
       ----------------------------------------------------- */

    .v18-home-section,
    .osv-blog-feature,
    .osv-top-artists-section{
        width:100% !important;
        max-width:none !important;

        padding-left:0 !important;
        padding-right:0 !important;

        margin-left:0 !important;
        margin-right:0 !important;
    }

    .v18-section-head{
        padding-left:2px !important;
        padding-right:2px !important;
    }


    /* -----------------------------------------------------
       STANDARD VIDEO RAILS
       Show more of the next card so swipe is obvious.
       ----------------------------------------------------- */

    .v18-rail{
        gap:10px !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }

    .v18-rail .v18-card{
        flex:0 0 72vw !important;
        width:72vw !important;
        max-width:285px !important;
    }

    .v18-card img{
        width:100% !important;
        object-fit:cover !important;
    }

    .v18-card-body{
        padding:10px 11px !important;
    }

    .v18-card-body h3{
        margin-bottom:4px !important;
    }


    /* -----------------------------------------------------
       WATCH / ARTISTS / TOP100 / SEARCH
       Slightly tighter so more fits onscreen.
       ----------------------------------------------------- */

    .osv-clean-nav-strip{
        gap:9px !important;

        margin-left:0 !important;
        margin-right:0 !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }

    .osv-clean-nav-strip > a{
        flex:0 0 132px !important;
        min-width:132px !important;
    }


    /* -----------------------------------------------------
       BLOG
       Wider usable screen / smaller cards than before.
       ----------------------------------------------------- */

    .osv-blog-feature-grid{
        gap:10px !important;

        margin-left:0 !important;
        margin-right:0 !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }

    .osv-blog-lead{
        flex:0 0 78vw !important;
        width:78vw !important;
        max-width:305px !important;
    }

    .osv-blog-small{
        flex:0 0 72vw !important;
        width:72vw !important;
        max-width:285px !important;
    }

    .osv-blog-lead-content{
        padding:12px !important;
    }

    .osv-blog-small > div{
        padding:10px !important;
    }


    /* -----------------------------------------------------
       DECADES
       ----------------------------------------------------- */

    .osv-clean-decade-strip{
        gap:9px !important;

        margin-left:0 !important;
        margin-right:0 !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }

    .osv-clean-decade-strip > a{
        flex:0 0 132px !important;
        min-width:132px !important;
    }


    /* -----------------------------------------------------
       TOP ARTISTS
       ----------------------------------------------------- */

    .osv-top-artists-section .osv-artist-circles{
        gap:12px !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }

    .osv-top-artists-section .osv-artist-circle-card{
        flex:0 0 100px !important;
        width:100px !important;
        min-width:100px !important;
    }

    .osv-top-artists-section .osv-artist-circle{
        width:88px !important;
        height:88px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    /* -----------------------------------------------------
       AD BLOCKS
       Keep them aligned with new wider mobile content.
       ----------------------------------------------------- */

    .ad-slot,
    .osv-ad-slot{
        margin-left:0 !important;
        margin-right:0 !important;
    }

}


/* Slightly tighter on narrow phones */
@media (max-width:390px){

    .shell,
    .home,
    .osv-shell{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .v18-rail .v18-card{
        flex-basis:74vw !important;
        width:74vw !important;
    }

    .osv-blog-lead{
        flex-basis:80vw !important;
        width:80vw !important;
    }

    .osv-blog-small{
        flex-basis:74vw !important;
        width:74vw !important;
    }

}


/* =========================================================
   OSV MOBILE HOMEPAGE — FINAL HORIZONTAL RAIL FIX V3
   MOBILE ONLY — DESKTOP FROZEN
   ========================================================= */

@media (max-width:768px){

    /* =====================================================
       PAGE / HOMEPAGE WIDTH
       ===================================================== */

    body{
        overflow-x:hidden !important;
    }

    main,
    .osv-main{
        width:100% !important;
        max-width:none !important;
    }

    .shell,
    .home,
    .osv-shell{
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box !important;

        padding-left:8px !important;
        padding-right:8px !important;
    }


    /* =====================================================
       HOMEPAGE VIDEO RAILS

       Critical fix:
       older desktop CSS makes these CSS GRID.
       Force them into true swipeable FLEX rails.
       ===================================================== */

    .home .v18-rail,
    .home .rail{
        display:flex !important;

        grid-template-columns:none !important;
        grid-auto-columns:unset !important;
        grid-auto-flow:unset !important;

        flex-direction:row !important;
        flex-wrap:nowrap !important;

        width:100% !important;
        max-width:none !important;

        gap:10px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:0 0 10px !important;
        margin-left:0 !important;
        margin-right:0 !important;

        -webkit-overflow-scrolling:touch !important;

        scroll-snap-type:x proximity;

        scrollbar-width:none !important;
    }

    .home .v18-rail::-webkit-scrollbar,
    .home .rail::-webkit-scrollbar{
        display:none !important;
    }


    /* Large first card with next card peeking in */

    .home .v18-rail > .v18-card,
    .home .rail > .card,
    .home .rail > .osv-video-card{
        display:block !important;

        flex:0 0 82vw !important;

        width:82vw !important;
        min-width:82vw !important;
        max-width:330px !important;

        box-sizing:border-box !important;

        scroll-snap-align:start;
    }


    /* =====================================================
       VIDEO THUMBNAILS
       ===================================================== */

    .home .v18-card img,
    .home .card img,
    .home .osv-video-card img{
        display:block !important;

        width:100% !important;
        max-width:none !important;

        aspect-ratio:16 / 9 !important;

        object-fit:cover !important;
    }


    /* =====================================================
       VIDEO TEXT
       ===================================================== */

    .home .v18-card-body,
    .home .card-body{
        width:100% !important;
        box-sizing:border-box !important;

        padding:10px 4px 4px !important;
    }

    .home .v18-card h3,
    .home .card h3,
    .home .osv-video-card h3{
        font-size:17px !important;
        line-height:1.15 !important;

        margin:0 0 5px !important;
    }

    .home .v18-card p,
    .home .card p{
        font-size:12px !important;
        line-height:1.35 !important;
    }


    /* =====================================================
       HOMEPAGE SECTIONS
       ===================================================== */

    .home .v18-home-section,
    .home .row,
    .osv-blog-feature,
    .osv-top-artists-section{
        width:100% !important;
        max-width:none !important;

        box-sizing:border-box !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }


    /* =====================================================
       WATCH / BROWSE / CHART / FIND
       ===================================================== */

    .osv-clean-nav-strip{
        display:flex !important;

        grid-template-columns:none !important;

        flex-direction:row !important;
        flex-wrap:nowrap !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        width:100% !important;

        gap:10px !important;

        padding:4px 0 10px !important;

        -webkit-overflow-scrolling:touch !important;

        scroll-snap-type:x proximity;

        scrollbar-width:none !important;
    }

    .osv-clean-nav-strip::-webkit-scrollbar{
        display:none !important;
    }

    .osv-clean-nav-strip > a{
        flex:0 0 128px !important;

        width:128px !important;
        min-width:128px !important;

        scroll-snap-align:start;
    }


    /* =====================================================
       LATEST FROM THE BLOG
       ===================================================== */

    .osv-blog-feature-grid{
        display:flex !important;

        grid-template-columns:none !important;

        flex-direction:row !important;
        flex-wrap:nowrap !important;

        width:100% !important;

        gap:10px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:0 0 10px !important;

        -webkit-overflow-scrolling:touch !important;

        scroll-snap-type:x proximity;

        scrollbar-width:none !important;
    }

    .osv-blog-feature-grid::-webkit-scrollbar{
        display:none !important;
    }

    .osv-blog-lead{
        flex:0 0 82vw !important;

        width:82vw !important;
        min-width:82vw !important;
        max-width:330px !important;

        scroll-snap-align:start;
    }

    .osv-blog-side{
        display:contents !important;
    }

    .osv-blog-small{
        flex:0 0 78vw !important;

        width:78vw !important;
        min-width:78vw !important;
        max-width:315px !important;

        scroll-snap-align:start;
    }


    /* =====================================================
       BROWSE BY DECADE
       ===================================================== */

    .osv-clean-decade-strip{
        display:flex !important;

        grid-template-columns:none !important;

        flex-direction:row !important;
        flex-wrap:nowrap !important;

        width:100% !important;

        gap:10px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:4px 0 10px !important;

        -webkit-overflow-scrolling:touch !important;

        scroll-snap-type:x proximity;

        scrollbar-width:none !important;
    }

    .osv-clean-decade-strip::-webkit-scrollbar{
        display:none !important;
    }

    .osv-clean-decade-strip > a{
        flex:0 0 128px !important;

        width:128px !important;
        min-width:128px !important;

        scroll-snap-align:start;
    }


    /* =====================================================
       TOP ARTISTS
       ===================================================== */

    .osv-top-artists-section .osv-artist-circles{
        display:flex !important;

        grid-template-columns:none !important;

        flex-direction:row !important;
        flex-wrap:nowrap !important;

        justify-content:flex-start !important;

        width:100% !important;

        gap:14px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:4px 0 12px !important;

        -webkit-overflow-scrolling:touch !important;

        scroll-snap-type:x proximity;

        scrollbar-width:none !important;
    }

    .osv-top-artists-section .osv-artist-circles::-webkit-scrollbar{
        display:none !important;
    }

    .osv-top-artists-section .osv-artist-circle-card{
        flex:0 0 104px !important;

        width:104px !important;
        min-width:104px !important;

        scroll-snap-align:start;
    }

    .osv-top-artists-section .osv-artist-circle{
        width:92px !important;
        height:92px !important;
    }

}


/* Narrow phones */

@media (max-width:390px){

    .shell,
    .home,
    .osv-shell{
        padding-left:6px !important;
        padding-right:6px !important;
    }

    .home .v18-rail > .v18-card,
    .home .rail > .card,
    .home .rail > .osv-video-card{
        flex-basis:84vw !important;

        width:84vw !important;
        min-width:84vw !important;
    }

    .osv-blog-lead{
        flex-basis:84vw !important;

        width:84vw !important;
        min-width:84vw !important;
    }

    .osv-blog-small{
        flex-basis:80vw !important;

        width:80vw !important;
        min-width:80vw !important;
    }

}


/* =========================================================
   OSV MOBILE NAV STRIP FIX V2
   Watch / Browse / Chart / Find
   MOBILE ONLY
   ========================================================= */

@media (max-width:768px){

    .osv-clean-nav-strip{
        display:flex !important;
        flex-wrap:nowrap !important;

        width:100% !important;
        max-width:100% !important;

        gap:10px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:8px 10px 12px !important;
        margin:8px 0 18px !important;

        box-sizing:border-box !important;

        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;

        scrollbar-width:none;
    }

    .osv-clean-nav-strip::-webkit-scrollbar{
        display:none;
    }

    .osv-clean-nav-strip > a{
        flex:0 0 138px !important;
        width:138px !important;
        min-width:138px !important;
        max-width:138px !important;

        min-height:92px !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:flex-start !important;

        padding:13px 14px !important;
        margin:0 !important;

        box-sizing:border-box !important;

        border-right:1px solid #ddd !important;

        overflow:hidden !important;

        scroll-snap-align:start;
    }

    .osv-clean-nav-strip > a:first-child{
        margin-left:0 !important;
    }

    .osv-clean-nav-strip > a:last-child{
        margin-right:8px !important;
    }

    .osv-clean-nav-strip > a span{
        display:block !important;

        margin:0 0 3px !important;

        font-size:11px !important;
        line-height:1 !important;
        font-weight:900 !important;
        letter-spacing:.08em !important;

        color:#e30613 !important;

        white-space:nowrap !important;
    }

    .osv-clean-nav-strip > a strong{
        display:block !important;

        margin:0 !important;

        font-size:27px !important;
        line-height:.93 !important;
        font-weight:950 !important;
        letter-spacing:-.035em !important;

        color:#111 !important;

        white-space:normal !important;
        word-break:normal !important;
    }

}


/* Slightly narrower phones */
@media (max-width:390px){

    .osv-clean-nav-strip{
        gap:8px !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .osv-clean-nav-strip > a{
        flex-basis:128px !important;
        width:128px !important;
        min-width:128px !important;
        max-width:128px !important;

        min-height:86px !important;

        padding:11px 12px !important;
    }

    .osv-clean-nav-strip > a strong{
        font-size:24px !important;
    }

}


/* =========================================================
   OSV MOBILE NAV TEXT BUMP V3
   Typography only — layout/scrolling unchanged
   ========================================================= */

@media (max-width:768px){

    .osv-clean-nav-strip > a span{
        font-size:13px !important;
        line-height:1.05 !important;
        font-weight:900 !important;
        letter-spacing:.07em !important;
    }

    .osv-clean-nav-strip > a strong{
        font-size:32px !important;
        line-height:.95 !important;
        font-weight:950 !important;
        letter-spacing:-.035em !important;
    }

}

@media (max-width:390px){

    .osv-clean-nav-strip > a span{
        font-size:12px !important;
    }

    .osv-clean-nav-strip > a strong{
        font-size:29px !important;
    }

}


/* ==========================================================
   OSV BLOG MAIN PAGE MOBILE FIX V1
   MOBILE ONLY — DESKTOP FROZEN
   ========================================================== */

@media (max-width:768px){

  /* -------------------------------------------------------
     BLOG PAGE WIDTH
     ------------------------------------------------------- */

  .osv-clean-news .shell{
    width:calc(100% - 24px) !important;
    max-width:none !important;

    margin-left:12px !important;
    margin-right:12px !important;

    padding-left:0 !important;
    padding-right:0 !important;

    box-sizing:border-box !important;
  }


  /* -------------------------------------------------------
     MUSIC STORIES HEADER
     ------------------------------------------------------- */

  .osv-clean-news-header{
    width:calc(100% - 24px) !important;
    max-width:none !important;

    margin:22px 12px 14px !important;
    padding:0 !important;
  }

  .osv-clean-news-header > div{
    width:100% !important;
    max-width:none !important;
  }

  .osv-clean-news-header h1{
    width:100% !important;

    margin:5px 0 8px !important;

    font-size:42px !important;
    line-height:.95 !important;

    word-break:normal !important;
  }

  .osv-clean-news-header p{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    font-size:14px !important;
    line-height:1.5 !important;
  }


  /* -------------------------------------------------------
     BLOG SEARCH + FILTERS
     ------------------------------------------------------- */

  .osv-blog-tools{
    display:block !important;

    width:100% !important;
    max-width:none !important;

    min-width:0 !important;

    margin:0 0 18px !important;
  }

  .osv-blog-search{
    width:100% !important;
    max-width:none !important;

    margin:0 0 10px !important;
  }

  .osv-blog-search input{
    display:block !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    box-sizing:border-box !important;
  }

  .osv-blog-filters{
    display:flex !important;

    width:100% !important;
    max-width:100% !important;

    flex-wrap:nowrap !important;

    gap:7px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:2px 0 8px !important;

    -webkit-overflow-scrolling:touch !important;

    scrollbar-width:none !important;
  }

  .osv-blog-filters::-webkit-scrollbar{
    display:none !important;
  }

  .osv-blog-filter{
    flex:0 0 auto !important;

    white-space:nowrap !important;

    margin:0 !important;
  }


  /* -------------------------------------------------------
     FEATURED STORY
     THIS IS THE SECTION CURRENTLY SQUEEZED ON MOBILE
     ------------------------------------------------------- */

  .osv-clean-feature{
    display:flex !important;

    flex-direction:column !important;

    grid-template-columns:none !important;

    width:calc(100% - 24px) !important;
    max-width:none !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 12px 28px !important;

    padding:0 !important;

    gap:0 !important;

    overflow:hidden !important;

    border-radius:18px !important;

    box-sizing:border-box !important;
  }


  /* IMAGE */

  .osv-clean-feature-image{
    display:block !important;

    position:relative !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;

    aspect-ratio:16 / 9 !important;

    overflow:hidden !important;
  }

  .osv-clean-feature-image img{
    display:block !important;

    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    object-fit:cover !important;

    border-radius:0 !important;
  }


  /* ARTICLE COPY */

  .osv-clean-feature-copy{
    display:block !important;

    position:relative !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    height:auto !important;

    padding:18px 16px 20px !important;

    box-sizing:border-box !important;
  }

  .osv-clean-feature-copy > span{
    display:block !important;

    margin:0 0 7px !important;
  }

  .osv-clean-feature-copy h2{
    display:block !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    margin:0 0 10px !important;

    font-size:27px !important;
    line-height:1.03 !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  .osv-clean-feature-copy h2 a{
    display:inline !important;

    width:auto !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .osv-clean-feature-copy p{
    display:block !important;

    width:100% !important;
    max-width:none !important;

    margin:0 0 12px !important;

    font-size:14px !important;
    line-height:1.5 !important;

    word-break:normal !important;
  }

  .osv-clean-feature-meta{
    display:flex !important;

    flex-wrap:wrap !important;

    gap:5px 10px !important;

    width:100% !important;
  }

  .osv-clean-read{
    display:inline-block !important;

    margin-top:12px !important;
  }

}