/* =========================================================
   PREMIER LEAGUE STANDINGS
   STANDALONE PAGE
========================================================= */

:root {

    --hero:
        radial-gradient(
            circle at 82% 16%,
            rgba(90, 208, 255, .25),
            transparent 28%
        ),

        radial-gradient(
            circle at 8% 100%,
            rgba(170, 90, 255, .28),
            transparent 34%
        ),

        linear-gradient(
            120deg,
            #08152a 0%,
            #172859 45%,
            #5535a8 100%
        );

    --text:
        #172033;

    --muted:
        #69778b;

    --border:
        #e4e9f1;

    --surface:
        #ffffff;

    --page-width:
        1180px;

    --shadow:
        0 18px 42px
        rgba(20, 34, 72, .12);

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        var(--text);

    background:
        linear-gradient(
            180deg,
            #edf3fa 0%,
            #f7f9fc 44%,
            #ffffff 100%
        );

    overflow-x:
        hidden;

}


a {
    color: inherit;
}


img {
    max-width: 100%;
}


/* =========================================================
   TOP BAR
========================================================= */

.standings-topbar {

    position: sticky;

    top: 0;

    z-index: 100;

    min-height: 62px;

    background:
        rgba(
            255,
            255,
            255,
            .95
        );

    backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid
        var(--border);

    box-shadow:
        0 4px 18px
        rgba(15, 23, 42, .05);

}


.standings-topbar-inner {

    width:
        min(
            var(--page-width),
            calc(100% - 30px)
        );

    min-height: 62px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

}


.standings-brand {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #172033;

    text-decoration:
        none;

    font-weight:
        900;

    letter-spacing:
        -.02em;

}


.standings-brand-mark {

    width:
        31px;

    height:
        31px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #172859,
            #5535a8
        );

    box-shadow:
        0 6px 16px
        rgba(70, 54, 164, .2);

}


.standings-league {

    color:
        #4f5e73;

    font-size:
        .76rem;

    font-weight:
        800;

    white-space:
        nowrap;

}


.standings-top-links {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    overflow-x:
        auto;

    scrollbar-width:
        none;

}


.standings-top-links::-webkit-scrollbar {
    display: none;
}


.standings-top-links a {

    flex:
        0 0 auto;

    padding:
        8px 11px;

    border-radius:
        999px;

    background:
        #eef2f8;

    color:
        #4e5c71;

    text-decoration:
        none;

    white-space:
        nowrap;

    font-size:
        .7rem;

    font-weight:
        800;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}


.standings-top-links a:hover {

    color:
        #172859;

    background:
        #e6ebf4;

    transform:
        translateY(-1px);

}


/* =========================================================
   BREADCRUMBS
========================================================= */

.breadcrumbs {

    width:
        min(
            var(--page-width),
            calc(100% - 30px)
        );

    margin:
        0 auto;

    padding:
        12px 0;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    overflow-x:
        auto;

    white-space:
        nowrap;

    color:
        #7a8799;

    font-size:
        .7rem;

    scrollbar-width:
        none;

}


.breadcrumbs::-webkit-scrollbar {
    display: none;
}


.breadcrumbs a {

    color:
        #566479;

    text-decoration:
        none;

}


.breadcrumbs a:hover {

    color:
        #5d49ca;

}


/* =========================================================
   HERO
========================================================= */

.standings-hero {

    width:
        min(
            var(--page-width),
            calc(100% - 30px)
        );

    margin:
        0 auto;

    border-radius:
        28px;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        var(--hero);

    box-shadow:
        0 24px 58px
        rgba(24, 38, 78, .20);

}


.standings-hero-inner {

    min-height:
        360px;

    padding:
        48px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(250px, .5fr);

    align-items:
        center;

    gap:
        38px;

}


.league-badge {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        29px;

    padding:
        0 10px;

    border-radius:
        999px;

    color:
        #b7e3ff;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    font-size:
        .63rem;

    font-weight:
        900;

    letter-spacing:
        .09em;

}


.standings-hero h1 {

    max-width:
        790px;

    margin:
        13px 0 0;

    font-size:
        clamp(
            2.5rem,
            5vw,
            5rem
        );

    line-height:
        .98;

    letter-spacing:
        -.05em;

}


.standings-hero p {

    max-width:
        720px;

    margin:
        18px 0 0;

    color:
        #d3dfef;

    line-height:
        1.7;

    font-size:
        .97rem;

}


.standings-hero-actions {

    margin-top:
        24px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.hero-action {

    min-height:
        42px;

    padding:
        0 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    text-decoration:
        none;

    font-size:
        .72rem;

    font-weight:
        850;

    transition:
        transform .18s ease;

}


.hero-action:hover {
    transform: translateY(-2px);
}


.hero-action-primary {

    color:
        #172859;

    background:
        #ffffff;

}


.hero-action-secondary {

    color:
        #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            .10
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .14
        );

}


.standings-hero-panel {

    min-height:
        180px;

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border-radius:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            .09
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    backdrop-filter:
        blur(10px);

}


.standings-hero-panel span {

    color:
        #b8dcff;

    font-size:
        .67rem;

    font-weight:
        850;

    letter-spacing:
        .08em;

}


.standings-hero-panel strong {

    margin-top:
        5px;

    font-size:
        1.8rem;

    line-height:
        1.1;

}


.standings-hero-panel small {

    margin-top:
        9px;

    color:
        #c9d5e7;

    line-height:
        1.5;

}


/* =========================================================
   STATUS STRIP
========================================================= */

.standings-status-strip {

    width:
        min(
            var(--page-width),
            calc(100% - 30px)
        );

    margin:
        14px auto 0;

    min-height:
        48px;

    padding:
        10px 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            .88
        );

    box-shadow:
        0 7px 22px
        rgba(15, 23, 42, .05);

    color:
        #637187;

    font-size:
        .7rem;

}


.standings-status-strip > div {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.status-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #1aad67;

    box-shadow:
        0 0 0 5px
        rgba(
            26,
            173,
            103,
            .11
        );

}


/* =========================================================
   QUICK NAV
========================================================= */

.standings-nav {

    position:
        sticky;

    top:
        62px;

    z-index:
        80;

    width:
        min(
            var(--page-width),
            calc(100% - 30px)
        );

    margin:
        12px auto 0;

    padding:
        8px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    overflow-x:
        auto;

    white-space:
        nowrap;

    scrollbar-width:
        none;

    border:
        1px solid
        rgba(
            23,
            40,
            89,
            .08
        );

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            .95
        );

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 8px 24px
        rgba(
            15,
            23,
            42,
            .08
        );

}


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


.standings-nav a {

    flex:
        0 0 auto;

    min-height:
        37px;

    padding:
        0 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    text-decoration:
        none;

    color:
        #59677b;

    background:
        #f1f4f8;

    font-size:
        .68rem;

    font-weight:
        800;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;

}


.standings-nav a:hover {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #172859,
            #5535a8
        );

    transform:
        translateY(-1px);

}


/* =========================================================
   MAIN
========================================================= */

.standings-main {

    width:
        min(
            var(--page-width),
            calc(100% - 30px)
        );

    margin:
        26px auto 55px;

}


/* =========================================================
   GENERAL SECTION
========================================================= */

.standings-section,
.standings-guide,
.standings-clubs,
.related-epl-pages,
.standings-seo {

    scroll-margin-top:
        130px;

}


.section-heading-row {

    margin-bottom:
        15px;

}


.section-kicker {

    display:
        inline-block;

    color:
        #6550cb;

    font-size:
        .64rem;

    font-weight:
        900;

    letter-spacing:
        .11em;

}


.section-heading-copy h2 {

    margin:
        5px 0 0;

    font-size:
        1.6rem;

    letter-spacing:
        -.03em;

}


.section-heading-copy p {

    max-width:
        720px;

    margin:
        6px 0 0;

    color:
        var(--muted);

    font-size:
        .83rem;

    line-height:
        1.65;

}


/* =========================================================
   STANDINGS CARD
========================================================= */

.standings-card {

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        var(--shadow);

}


.standings-scroll {

    width:
        100%;

    overflow-x:
        auto;

    scrollbar-width:
        thin;

    -webkit-overflow-scrolling:
        touch;

}


/* =========================================================
   TABLE
========================================================= */

.epl-standings {

    width:
        100%;

    min-width:
        900px;

    border-collapse:
        collapse;

    font-size:
        .78rem;

}


.epl-standings thead {

    color:
        #ffffff;

    background:
        var(--hero);

}


.epl-standings th {

    padding:
        15px 10px;

    text-align:
        center;

    white-space:
        nowrap;

    font-size:
        .67rem;

    font-weight:
        900;

    letter-spacing:
        .04em;

}


.epl-standings td {

    padding:
        13px 10px;

    text-align:
        center;

    color:
        #344256;

    background:
        #ffffff;

    border-bottom:
        1px solid
        #ebeff5;

}


.epl-standings tbody tr:last-child td {
    border-bottom: 0;
}


.epl-standings tbody tr {

    transition:
        background .18s ease,
        transform .18s ease;

}


.epl-standings tbody tr:hover td {

    background:
        #f7f9fc;

}


/* =========================================================
   POSITION
========================================================= */

.position-column {

    width:
        48px;

}


.standings-position {

    color:
        #172033;

    font-weight:
        900;

}


/* =========================================================
   TEAM COLUMN
========================================================= */

.team-column {

    min-width:
        220px;

    text-align:
        left !important;

}


.standings-team {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    text-align:
        left;

}


.standings-team-logo {

    width:
        29px;

    height:
        29px;

    object-fit:
        contain;

    flex:
        0 0 29px;

    filter:
        drop-shadow(
            0 3px 5px
            rgba(0,0,0,.12)
        );

}


.standings-team-placeholder {

    width:
        29px;

    height:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 29px;

    border-radius:
        9px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #172859,
            #5535a8
        );

    font-size:
        .57rem;

    font-weight:
        900;

}


.standings-team-name {

    color:
        #172033;

    font-weight:
        850;

    white-space:
        nowrap;

}


/* =========================================================
   POINTS / GOAL DIFFERENCE
========================================================= */

.standings-points {

    color:
        #111827 !important;

    font-weight:
        950;

}


.goal-difference-positive {

    color:
        #088148 !important;

    font-weight:
        850;

}


.goal-difference-negative {

    color:
        #c83340 !important;

    font-weight:
        850;

}


/* =========================================================
   POSITION ZONES
========================================================= */

.epl-standings tr.zone-champions td:first-child {

    box-shadow:
        inset 4px 0 0
        #4a8df6;

}


.epl-standings tr.zone-europa td:first-child {

    box-shadow:
        inset 4px 0 0
        #9d57df;

}


.epl-standings tr.zone-conference td:first-child {

    box-shadow:
        inset 4px 0 0
        #28a6a2;

}


.epl-standings tr.zone-relegation td:first-child {

    box-shadow:
        inset 4px 0 0
        #df5162;

}


/* =========================================================
   FORM
========================================================= */

.form-column {

    min-width:
        130px;

}


.form-list {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

}


.form-dot {

    width:
        19px;

    height:
        19px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #ffffff;

    font-size:
        .54rem;

    font-weight:
        900;

}


.form-win {

    background:
        #0a8e4d;

}


.form-draw {

    background:
        #738096;

}


.form-loss {

    background:
        #d63845;

}


.form-empty {

    background:
        #e2e7ef;

    color:
        transparent;

}


/* =========================================================
   LOADING / EMPTY
========================================================= */

.standings-loading,
.standings-empty {

    padding:
        32px !important;

    color:
        #7a8799 !important;

    text-align:
        center !important;

}


/* =========================================================
   TABLE GUIDE
========================================================= */

.standings-guide {

    margin-top:
        40px;

    padding:
        28px;

    border-radius:
        22px;

    color:
        #ffffff;

    background:
        var(--hero);

    box-shadow:
        var(--shadow);

}


.standings-guide .section-kicker {

    color:
        #b7dcff;

}


.standings-guide h2 {

    color:
        #ffffff;

}


.standings-guide p {

    color:
        #ccd8e9;

}


.standings-key {

    margin-top:
        19px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

}


.standings-key span {

    padding:
        8px 11px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border-radius:
        999px;

    color:
        #dbe5f3;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    font-size:
        .67rem;

    font-weight:
        750;

}


.standings-key-color {

    width:
        8px;

    height:
        8px;

    display:
        inline-block;

    border-radius:
        50%;

}


.standings-key-color.champions {
    background: #4a8df6;
}


.standings-key-color.europa {
    background: #9d57df;
}


.standings-key-color.relegation {
    background: #df5162;
}


.standings-explainer-grid {

    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap:
        9px;

}


.standings-explainer-grid article {

    min-height:
        80px;

    padding:
        13px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    border-radius:
        13px;

    text-align:
        center;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

}


.standings-explainer-grid strong {

    font-size:
        1.1rem;

}


.standings-explainer-grid span {

    color:
        #c5d1e2;

    font-size:
        .62rem;

}


/* =========================================================
   CLUB LINKS
========================================================= */

.standings-clubs {

    margin-top:
        40px;

}


.club-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.club-links a {

    padding:
        8px 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    color:
        #58667a;

    background:
        #ffffff;

    text-decoration:
        none;

    font-size:
        .68rem;

    font-weight:
        800;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;

}


.club-links a:hover {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #172859,
            #5535a8
        );

    transform:
        translateY(-1px);

}


.browse-clubs-link {

    margin-top:
        15px;

    display:
        inline-flex;

    color:
        #5d49ca;

    text-decoration:
        none;

    font-size:
        .72rem;

    font-weight:
        850;

}


/* =========================================================
   RELATED PAGES
========================================================= */

.related-epl-pages {

    margin-top:
        42px;

    padding:
        30px;

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, .06);

}


.related-epl-pages h2 {

    margin:
        5px 0 18px;

    font-size:
        1.5rem;

}


.related-page-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        10px;

}


.related-page-grid a {

    min-height:
        110px;

    padding:
        16px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    border-radius:
        15px;

    text-decoration:
        none;

    color:
        #ffffff;

    background:
        var(--hero);

    box-shadow:
        0 9px 22px
        rgba(20, 34, 72, .12);

    transition:
        transform .18s ease;

}


.related-page-grid a:hover {

    transform:
        translateY(-3px);

}


.related-page-grid strong {

    font-size:
        .82rem;

}


.related-page-grid span {

    color:
        #cbd7e8;

    font-size:
        .68rem;

    line-height:
        1.5;

}


/* =========================================================
   SEO CONTENT
========================================================= */

.standings-seo {

    margin-top:
        42px;

    padding:
        30px;

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, .05);

}


.standings-seo h2 {

    margin:
        6px 0 18px;

    font-size:
        1.55rem;

}


.standings-seo h3 {

    margin:
        25px 0 8px;

    font-size:
        1rem;

}


.standings-seo p {

    color:
        #667489;

    font-size:
        .85rem;

    line-height:
        1.8;

}


.standings-seo a {

    color:
        #5d49ca;

    font-weight:
        800;

}


/* =========================================================
   FOOTER
========================================================= */

.standings-footer {

    margin-top:
        50px;

    padding:
        35px 20px;

    background:
        #101827;

}


.standings-footer nav {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        14px;

}


.standings-footer a {

    color:
        #c0cbda;

    text-decoration:
        none;

    font-size:
        .7rem;

    font-weight:
        700;

}


.standings-footer a:hover {

    color:
        #ffffff;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .standings-hero-inner {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        padding:
            38px;

    }


    .standings-hero-panel {

        min-height:
            130px;

    }


    .standings-explainer-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }


    .related-page-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .standings-topbar-inner {

        width:
            calc(
                100% - 20px
            );

    }


    .standings-league {

        display:
            none;

    }


    .standings-top-links {

        max-width:
            66%;

    }


    .standings-top-links a {

        padding:
            7px 9px;

        font-size:
            .64rem;

    }


    .breadcrumbs {

        width:
            calc(
                100% - 20px
            );

    }


    .standings-hero {

        width:
            calc(
                100% - 20px
            );

        border-radius:
            20px;

    }


    .standings-hero-inner {

        padding:
            30px 21px;

        gap:
            20px;

    }


    .standings-hero h1 {

        font-size:
            2.25rem;

    }


    .standings-hero p {

        font-size:
            .8rem;

    }


    .standings-hero-actions {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;

    }


    .standings-hero-actions::-webkit-scrollbar {
        display: none;
    }


    .hero-action {

        flex:
            0 0 auto;

    }


    .standings-status-strip {

        width:
            calc(
                100% - 20px
            );

        font-size:
            .65rem;

    }


    .standings-nav {

        top:
            58px;

        width:
            calc(
                100% - 20px
            );

        margin-top:
            9px;

        padding:
            7px;

    }


    .standings-main {

        width:
            calc(
                100% - 20px
            );

        margin-top:
            20px;

    }


    .standings-section,
    .standings-guide,
    .standings-clubs,
    .related-epl-pages,
    .standings-seo {

        scroll-margin-top:
            120px;

    }


    .section-heading-copy h2 {

        font-size:
            1.25rem;

    }


    .standings-card {

        border-radius:
            17px;

    }


    .epl-standings {

        min-width:
            780px;

        font-size:
            .72rem;

    }


    .epl-standings th,
    .epl-standings td {

        padding:
            11px 8px;

    }


    /*
     * Sticky position + team columns.
     */

    .epl-standings th:nth-child(1),
    .epl-standings td:nth-child(1) {

        position:
            sticky;

        left:
            0;

        z-index:
            5;

    }


    .epl-standings th:nth-child(2),
    .epl-standings td:nth-child(2) {

        position:
            sticky;

        left:
            42px;

        z-index:
            4;

    }


    .epl-standings thead th:nth-child(1),
    .epl-standings thead th:nth-child(2) {

        background:
            #172859;

    }


    .epl-standings tbody td:nth-child(1),
    .epl-standings tbody td:nth-child(2) {

        background:
            #ffffff;

    }


    .team-column {

        min-width:
            180px;

    }


    .standings-team-logo,
    .standings-team-placeholder {

        width:
            25px;

        height:
            25px;

        flex-basis:
            25px;

    }


    .standings-team-name {

        font-size:
            .7rem;

    }


    .form-dot {

        width:
            17px;

        height:
            17px;

    }


    .standings-guide {

        padding:
            22px 17px;

        border-radius:
            18px;

    }


    .standings-key {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;

    }


    .standings-key::-webkit-scrollbar {
        display: none;
    }


    .standings-key span {

        flex:
            0 0 auto;

    }


    .standings-explainer-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            7px;

    }


    .standings-explainer-grid article {

        min-height:
            72px;

        padding:
            10px;

    }


    .club-links {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;

        padding-bottom:
            6px;

    }


    .club-links::-webkit-scrollbar {
        display: none;
    }


    .club-links a {

        flex:
            0 0 auto;

    }


    .related-epl-pages {

        padding:
            22px 17px;

    }


    .related-page-grid {

        display:
            flex;

        overflow-x:
            auto;

        gap:
            9px;

        scrollbar-width:
            none;

        scroll-snap-type:
            x mandatory;

    }


    .related-page-grid::-webkit-scrollbar {
        display: none;
    }


    .related-page-grid a {

        flex:
            0 0
            min(
                76vw,
                260px
            );

        scroll-snap-align:
            start;

    }


    .standings-seo {

        padding:
            23px 17px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .standings-brand span:last-child {

        display:
            none;

    }


    .standings-top-links {

        max-width:
            82%;

    }


    .standings-hero h1 {

        font-size:
            2rem;

    }


    .standings-explainer-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}