@media screen and (max-width: 1440px) {
    .cardItem {
        width: 27%;
        max-width: unset;
        min-width: unset;
    }
}
@media screen and (max-width: 1280px) {
    .contentLastPublishedItemDate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }
    .bodyGameBlock {
        flex-direction: column;
    }
    .bodyGameRight{
        width:100%;
        padding: 10px 0px;
    }
    .bodyGameLeft{
        width:100%;
        padding: 10px 0px;
    }
    .bodyGameBlock {
        flex-direction: column;
    }
}

@media screen and (max-width: 900px) {
    .contentLastPublishedItemDate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }
    .bodyGameBlock {
        flex-direction: column;
    }
    .bodyGameRight{
        width:100%;
        padding: 10px 0px;
    }
    .bodyGameLeft{
        width:100%;
        padding: 10px 0px;
    }
    .bodyGameBlock {
        flex-direction: column;
    }
}


/* ===== Mobile (<= 768px) ===== */
@media screen and (max-width: 768px) {
    /* The left rainbow strip + big logo reserve ~350px on desktop; drop them on mobile */
    body .rainbow{ display: none; }
    body #navbar{ height: 58px; padding-bottom: 4px; align-items: center; }
    body .logoLeft{ width: 44px; height: 50px; left: 4px; margin-top: 2px; background-size: 36px; background-position-y: 0; }
    body .logoLeftShape{ width: 38px; height: 44px; margin: 3px 0 0 5px; }
    body img.logoRetromarket{ height: 28px; margin-top: 8px; }
    body .logoLeftText img{ display: none; }
    body .headerRight{ height: 54px; }
    body #navbar a{ padding: 8px 10px; font-size: 0.85rem; }
    body .containerMenu{ margin: 8px 12px; }
    body .bar1, body .bar2, body .bar3{ width: 26px; margin: 5px 0; }
    body .menuMobileOpened{ top: 58px; right: 10px; width: 220px; }
    body .content{ height: calc(100vh - 62px); }
    body .sticky + .content{ margin-top: 62px; }

    /* Content areas: full width instead of calc(100vw - 350px) */
    body .contentHomePage, body .contentGamePage, body .contentSearchArea{
        width: 100%;
        max-width: 100%;
        padding: 10px 12px 120px;
        box-sizing: border-box;
    }
    body .contentSearchArea{ padding: 6px 8px; }
    body .searchTerm{ font-size: 1rem; height: 30px; }
    body .searchButton{ width: 36px; height: 38px; font-size: 18px; }
    body div#advancedSearch{ flex-direction: column; align-items: stretch; gap: 0.4rem; padding: 8px; justify-content: flex-start; }
    body .wrapSelect{ width: 100%; margin-top: 0; }
    body .advancedSearchSelect{ font-size: 0.95rem; }

    /* Game detail page (global classes from app.css / content.css) */
    body .headerGame{ padding-top: 14px; gap: 0.5rem; }
    body .contentGamePage .titleGame{ font-size: 1.3rem; }
    body .addDateGame{ font-size: 0.8rem; }
    body .game-breadcrumb{ font-size: 0.72rem; padding-top: 0.75rem; gap: 0.35rem; }
    body .game-breadcrumb-link{ max-width: 100px; }
    body .game-breadcrumb-current{ max-width: 140px; }
    body .game-title-row{ gap: 0.4rem; }
    body .game-platform-badge, body .game-year-badge{ font-size: 0.68rem; padding: 0.15rem 0.5rem; }
    body .game-platform-badge img{ width: 15px; height: 15px; }
    body .bodyGame{ width: 100%; max-width: 100%; padding: 10px 0 60px; box-sizing: border-box; }
    body .bodyGameBlock{ gap: 1rem; margin-top: 1rem; flex-wrap: nowrap; }
    body .bodyGameBlock > *{ min-width: 0; }
    body .bodyGameSplittedInformations{ display: block; }
    body .bodyGameSplittedInfo{ width: 100%; margin: 6px 0 12px; box-sizing: border-box; }
    body .bodyGameLeft{ flex: 0 0 100%; width: 100%; min-width: 0; padding: 10px 0; }
    body .bodyGameRight{ flex: 1 1 100%; width: 100%; padding: 12px 2px; min-width: 0; }
    body .hash-value{ word-break: break-all; overflow-wrap: anywhere; }
    body .screenshotsContainer{ gap: 0.5rem; }
    body .screenshotImage{ height: 100px; }
    body .bodyGameDescription, body .bodyGameSplittedInformations{ font-size: 0.92rem; }
    body .descriptionBlock{ font-size: 0.92rem; line-height: 1.6; margin: 12px 0; }
    body .SecondaryGameImagesOrVideos img{ max-width: 46%; max-height: 88px; margin-right: 8px; margin-bottom: 8px; }
    body button.outlined{ font-size: 0.9rem; padding: 8px 12px; margin-right: 8px; margin-bottom: 8px; }
    body .mainGameImageOrVideo .cardItemPicture img{ max-height: 42vh; object-fit: contain; }
    body .titleLastPublishedItem, body .titleLastPublishedItemDate{ margin-left: 4px; font-size: 1rem; }
}