/* Mobile blog layout; loaded after the shared site styles. */
@media (max-width: 820px) {
    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-content {
        box-sizing:border-box !important;
        width:100% !important;
        max-width:720px !important;
        margin-inline:auto !important;
        padding:24px clamp(16px,4vw,28px) 48px !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-magazine-kicker,
    body.site-page-blogs:not(.hardware-360-body) .blogs-magazine-layout {
        grid-template-columns:minmax(0,1fr) !important;
        gap:20px !important;
        min-width:0 !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-magazine-kicker {
        gap:12px !important;
        padding:12px 0 24px !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-magazine-kicker p {
        max-width:none !important;
        margin:0 !important;
        font-size:15px !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-card,
    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-card--featured {
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        box-sizing:border-box !important;
        border-radius:16px !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-image,
    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-card--featured .blogs-reference-image {
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:16 / 10 !important;
        border-radius:16px 16px 0 0 !important;
        overflow:hidden !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-image img {
        display:block !important;
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-body,
    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-card--featured .blogs-reference-body {
        min-width:0 !important;
        padding:20px !important;
        overflow-wrap:anywhere !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-body h2,
    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-card--featured .blogs-reference-body h2 {
        display:block !important;
        min-height:0 !important;
        font-size:clamp(23px,6vw,30px) !important;
        line-height:1.2 !important;
        -webkit-line-clamp:unset !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-body p,
    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-card--featured .blogs-reference-body p {
        font-size:15px !important;
        line-height:1.65 !important;
        margin:12px 0 !important;
    }

    body.site-page-blogs:not(.hardware-360-body) .blogs-reference-body > a {
        align-self:flex-start !important;
        min-height:44px !important;
        font-size:13px !important;
    }

}