/* STEP177 — use the available desktop width while preserving STEP175 mobile design. */
@media (min-width: 981px) {
    body .portal-layout.blog-layout.blog-layout--beauty {
        display: grid !important;
        grid-template-columns: minmax(0, 920px) minmax(240px, 280px) !important;
        gap: 28px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 1228px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body .blog-layout--beauty > .portal-main {
        width: 100% !important;
        min-width: 0 !important;
    }

    body .blog-layout--beauty .blog-feed-heading,
    body .blog-layout--beauty .blog-toolbar.blog-toolbar--beauty,
    body .blog-layout--beauty .blog-feed.blog-feed--beauty {
        width: 100% !important;
        max-width: 920px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body .blog-layout--beauty .blog-feed-card.blog-feed-card--beauty {
        width: 100% !important;
        max-width: none !important;
    }

    body .blog-layout--beauty > .blog-sidebar--beauty {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (min-width: 981px) and (max-width: 1240px) {
    body .portal-layout.blog-layout.blog-layout--beauty {
        grid-template-columns: minmax(0, 1fr) 240px !important;
        gap: 22px !important;
    }
}