/* Homepage mobile corrections, loaded after the legacy and inline styles. */
@media screen and (max-width: 767px) {
    html { font-size: 16px; }

    /* The legacy layout floats every element, including inline text. */
    article, article * { box-sizing: border-box; }
    article > section,
    article > div:not(.clear) {
        float: none;
        clear: both;
        left: auto;
        width: calc(100% - 24px);
        margin: 24px 12px;
    }
    article > section::after { content: ""; display: block; clear: both; }
    article p, article h2, article h3,
    article p a, article strong, article span {
        float: none;
    }
    article p { font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
    article h2, article h3 { line-height: 1.3 !important; }
    article img { max-width: 100%; height: auto; }

    section.intro > div.gold_border {
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
        border-width: 10px;
        padding: 14px 10px;
    }
    section.intro div p {
        width: 100% !important;
        margin: 0 0 20px !important;
        font-size: 1rem;
        line-height: 1.6;
    }
    section.intro .gold_border > div {
        float: none;
        width: 100% !important;
        height: auto;
        margin: 24px 0 !important;
        padding: 12px;
    }
    section.intro .gold_border > img {
        display: block;
        float: none;
        width: 90px;
        margin: -40px auto 12px;
    }
    section.intro .gold_border p img {
        float: none !important;
        display: block;
        max-width: 100% !important;
        width: auto;
        height: auto !important;
        margin: 12px auto !important;
    }
    section.intro div a.big_btn {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 12px 0 !important;
        padding: 14px 10px;
        font-size: 1rem;
        white-space: normal;
    }

    /* Reset desktop percentage offsets on promo panels and their children. */
    #ss-promos .promotions {
        display: block;
        float: none;
        width: 100%;
        padding: 20px 10px;
        margin: 16px 0;
    }
    #ss-promos .promotions > li {
        float: none;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #ss-promos .promotions > li:empty { display: none; }
    #ss-promos .promotions li div {
        float: none;
        width: 100% !important;
        margin: 20px 0 !important;
    }
    #ss-promos .promotions li p,
    #ss-promos .promotions li h2,
    #ss-promos .promotions li h3 {
        width: 100% !important;
        margin: 16px 0 !important;
        font-size: 1rem;
    }
    #ss-promos .promotions li h2 { font-size: 1.4rem !important; }
    #ss-promos .promotions li h3 { font-size: 1.2rem; }
    #ss-promos .promotions img { float: none; margin: 0 !important; }
    #ss-promos .promo-list {
        float: none;
        width: 100%;
        padding: 0;
        margin: 16px 0;
        text-align: center;
    }
    #ss-promos .promo-list li {
        list-style-position: inside;
        text-align: center;
        float: none;
        width: 100% !important;
        margin: 12px 0;
        padding: 0;
        font-size: 1rem;
        line-height: 1.5;
    }
    #ss-promos .promo-btns { gap: 12px; }
    #ss-promos .promo-btns a {
        box-sizing: border-box;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 10px !important;
        white-space: normal;
    }

    /* Keep feature cards and the final game links in one readable column. */
    article ul.top:not(.promotions) {
        float: none;
        width: 100%;
        padding: 12px;
        margin: 16px 0;
    }
    article ul.top:not(.promotions) > li {
        float: none;
        width: 100%;
        margin: 0 0 28px;
        padding: 16px;
    }
    article ul.top:not(.promotions) li p {
        width: 100%;
        margin: 16px 0;
        font-size: 1rem;
        line-height: 1.6;
    }
    article ul.top:not(.promotions) h3 { font-size: 1.4rem; }
    article ul.top:not(.promotions) a.btn {
        float: none;
        display: block;
        left: auto;
        width: 100%;
        margin: 12px 0;
        font-size: 1rem;
    }
    article .retard { width: 100%; margin: 16px 0; }
    article > section > div:not(.gold_border):not(.clear) {
        float: none;
        width: 100% !important;
        margin: 12px 0 !important;
    }
    article > section > div > a.big_btn {
        float: none;
        display: block;
        padding: 14px 10px;
    }
    header div.flexslider ul.slides li div div.left a.big_btn {
        box-sizing: border-box;
        margin: 8px 0;
        padding: 12px 8px;
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    /* Let the banner's text and buttons determine its height on phones. */
    header div.flexslider {
        float: none;
        clear: both;
        height: auto;
        margin-top: 0;
    }
    header div.flexslider ul.slides,
    header div.flexslider ul.slides > li {
        float: none;
        height: auto;
    }
    header div.flexslider ul.slides > li {
        box-sizing: border-box;
        padding: 55px 16px 40px;
        background-size: cover;
        background-position: center;
    }
    header div.flexslider ul.slides li > div {
        float: none;
        width: 100%;
        height: auto;
        left: auto;
        margin: 0;
    }
    header div.flexslider ul.slides li div div.left {
        position: relative;
        float: none;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        margin: 0;
        font-size: 1rem;
    }
    header div.flexslider ul.slides li div div.left h1.banner {
        float: none;
        width: 100%;
        margin: 0 0 16px;
        font-size: 1.4rem;
        line-height: 1.3;
        text-align: center;
    }
    header div.flexslider ul.slides li div div.left p {
        float: none;
        width: 100%;
        margin: 16px 0;
        line-height: 1.5;
    }
    header div.flexslider ul.slides li div div.left p.bonus {
        line-height: 1.2;
    }
    header div.flexslider ul.slides li div div.left a.big_btn {
        float: none;
        display: block;
        width: 100%;
        margin: 12px 0;
    }
    header div.flexslider ul.slides li div div.right {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        height: auto;
        margin: 0;
        opacity: .25;
        pointer-events: none;
    }
    header div.flexslider ul.slides li div div.right img {
        float: none;
        display: block;
        width: 100%;
        max-width: 320px;
        height: auto;
        top: auto;
        margin: 0 auto;
    }
    article > section.intro:first-child { margin-top: 32px; }
}