/*====================================================
TOP RATED DESKTOP RESPONSIVE
====================================================*/

@media (max-width:1400px){

    .top-rated{

        max-width:1300px;

        padding:0 20px;
    }

    .top-rated-grid{

        grid-template-columns:repeat(5, 196px);

        gap:24px;
    }
}

@media (max-width:1280px){

    .top-rated-grid{

        grid-template-columns:repeat(5, 184px);

        gap:18px;
    }

    .album-card{

        width:184px;

        padding:10px;
    }

    .album-thumb,
    .album-thumb img{

        width:162px;

        height:162px;
    }

    .album-body{

        width:162px;
    }
}

@media (max-width:1140px){

    .top-rated-grid{

        grid-template-columns:repeat(5, 168px);

        gap:16px;
    }

    .album-card{

        width:168px;

        min-height:244px;

        padding:10px;
    }

    .album-thumb,
    .album-thumb img{

        width:146px;

        height:146px;
    }

    .album-body{

        width:146px;
    }

    .album-title a{

        font-size:13px;
    }

    .album-artist,
    .album-review{

        font-size:11px;
    }
}

/*====================================================
TOP RATED MOBILE
====================================================*/

@media (max-width:768px){

    .top-rated{

        width:100%;

        height:auto;

        margin:32px auto;

        padding:0 16px;

        box-sizing:border-box;

        overflow:hidden;
    }

    .top-rated-header{

        width:100%;

        height:auto;

        display:flex;

        justify-content:space-between;

        align-items:flex-start;

        gap:12px;

        margin-bottom:18px;
    }

    .top-rated-heading{

        flex:1;

        min-width:0;
    }

    .top-rated-header h2{

        font-size:25px;

        line-height:1.15;
    }

    .top-rated-header p{

        font-size:13px;

        margin-top:2px;
    }

    .top-rated-tabs{

        margin:0;

        padding:2px;

        border-radius:6px;

        flex-shrink:0;
        border:1px solid rgba(17,24,39,.08);
        background:linear-gradient(180deg, #f4f4f5 0%, #e6e6e8 100%);
    }

    .top-rated-tabs button{

        height:32px;

        padding:0 10px;

        font-size:16px;

        background:transparent;

        color:#373939;

        border:0;

        outline:none;

        box-shadow:none;

        -webkit-tap-highlight-color:transparent;

        appearance:none;

        -webkit-appearance:none;
    }

    .top-rated-tabs button.active{

        background:linear-gradient(135deg, #111827 0%, #232f45 100%);

        color:#fff;
    }

    .top-rated-tabs button:focus,
    .top-rated-tabs button:focus-visible,
    .top-rated-tabs button:active{

        outline:none;

        box-shadow:none;
    }

    .top-rated-grid{

        display:flex;

        flex-wrap:nowrap;

        gap:12px;

        overflow-x:auto;

        overflow-y:hidden;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        -ms-overflow-style:none;

        padding:8px 8px 14px;

        scroll-padding-inline:8px;
    }

    .top-rated-grid::-webkit-scrollbar{

        display:none;
    }

    .album-card{

        flex:0 0 150px;

        width:150px;

        min-width:150px;

        max-width:150px;

        height:218px;

        min-height:218px;

        padding:7px;

        border-radius:14px;

        scroll-snap-align:start;

        box-sizing:border-box;

        box-shadow:
            0 0 0 1px rgba(17,24,39,.08),
            0 8px 16px rgba(17,24,39,.2),
            0 14px 22px rgba(17,24,39,.14),
            inset 0 1px 0 rgba(255,255,255,.28);
    }

    .album-thumb{

        width:136px;

        height:136px;

        margin:0 auto 8px;

        border-radius:10px;

        overflow:hidden;
    }

    .album-thumb img{

        width:136px;

        height:136px;

        object-fit:cover;

        display:block;
    }

    .album-review .top-rated-play--inline{
        left:auto;
        right:0;
        bottom:auto;
        width:22px;
        height:22px;
        min-width:22px;
    }

    .album-review .top-rated-play--inline .songs-archive-play-icon{
        border-top-width:5px;
        border-bottom-width:5px;
        border-left-width:9px;
    }

    .album-review .top-rated-play--inline.is-playing .songs-archive-play-icon{
        width:10px;
        height:10px;
        background:
            linear-gradient(90deg, #111827 0, #111827 3px, transparent 3px, transparent 7px, #111827 7px, #111827 10px);
    }

    .album-body{

        width:136px;

        margin:0 auto;
    }

    .album-title a{

        font-size:13px;

        line-height:1.25;
    }

    .album-artist{

        margin-top:3px;

        font-size:11px;
    }

    .album-review{

        margin-top:6px;

        font-size:11px;
    }

    .album-count{
        height:16px;
        padding:0 6px;
        min-width:22px;
        font-size:8px;
    }
}

/*====================================================
SMALL PHONES
====================================================*/

@media (max-width:480px){

    .top-rated{

        padding:0 12px;
    }

    .top-rated-header h2{

        font-size:18px;
    }

    .top-rated-header p{

        font-size:12px;
    }

    .top-rated-tabs{

        transform:scale(.90);

        transform-origin:right top;
    }
}