/* Shared hero-art standard for every Services detail page.
   Typography continues to inherit from the site-wide stylesheet. */
body:has(.web-opening),
body:has(.dm-opening),
body:has(.mobile-opening),
body:has(.commerce-opening),
body:has(.enterprise-opening),
body:has(.gov-opening),
body:has(.ops-opening),
body:has(.intel-opening),
body:has(.comms-opening) {
    --service-hero-art-width: 650px;
    --service-hero-art-height: 420px;
}

body:has(.web-opening) .page-hero-inner,
body:has(.dm-opening) .page-hero-inner,
body:has(.mobile-opening) .page-hero-inner,
body:has(.commerce-opening) .page-hero-inner,
body:has(.enterprise-opening) .page-hero-inner,
body:has(.gov-opening) .page-hero-inner,
body:has(.ops-opening) .page-hero-inner,
body:has(.intel-opening) .page-hero-inner,
body:has(.comms-opening) .page-hero-inner {
    grid-template-columns: minmax(0, .94fr) minmax(450px, 1.06fr);
    gap: 52px;
    align-items: center;
}

body:has(.web-opening) .page-hero-art,
body:has(.dm-opening) .page-hero-art,
body:has(.mobile-opening) .page-hero-art,
body:has(.commerce-opening) .page-hero-art,
body:has(.enterprise-opening) .page-hero-art,
body:has(.gov-opening) .page-hero-art,
body:has(.ops-opening) .page-hero-art,
body:has(.intel-opening) .page-hero-art,
body:has(.comms-opening) .page-hero-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--service-hero-art-height);
    min-height: var(--service-hero-art-height);
    margin: 0;
}

body:has(.web-opening) .page-hero-art img,
body:has(.dm-opening) .page-hero-art img,
body:has(.mobile-opening) .page-hero-art img,
body:has(.commerce-opening) .page-hero-art img,
body:has(.enterprise-opening) .page-hero-art img,
body:has(.gov-opening) .page-hero-art img,
body:has(.ops-opening) .page-hero-art img,
body:has(.intel-opening) .page-hero-art img,
body:has(.comms-opening) .page-hero-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: var(--service-hero-art-width);
    max-height: var(--service-hero-art-height);
    object-fit: contain;
    object-position: center;
    transform: none;
    filter: none;
    animation: none;
}

@media (max-width: 1000px) {
    body:has(.web-opening),
    body:has(.dm-opening),
    body:has(.mobile-opening),
    body:has(.commerce-opening),
    body:has(.enterprise-opening),
    body:has(.gov-opening),
    body:has(.ops-opening),
    body:has(.intel-opening),
    body:has(.comms-opening) {
        --service-hero-art-width: 580px;
        --service-hero-art-height: 370px;
    }
}

@media (max-width: 760px) {
    body:has(.web-opening),
    body:has(.dm-opening),
    body:has(.mobile-opening),
    body:has(.commerce-opening),
    body:has(.enterprise-opening),
    body:has(.gov-opening),
    body:has(.ops-opening),
    body:has(.intel-opening),
    body:has(.comms-opening) {
        --service-hero-art-width: 520px;
        --service-hero-art-height: 320px;
    }

    body:has(.web-opening) .page-hero-inner,
    body:has(.dm-opening) .page-hero-inner,
    body:has(.mobile-opening) .page-hero-inner,
    body:has(.commerce-opening) .page-hero-inner,
    body:has(.enterprise-opening) .page-hero-inner,
    body:has(.gov-opening) .page-hero-inner,
    body:has(.ops-opening) .page-hero-inner,
    body:has(.intel-opening) .page-hero-inner,
    body:has(.comms-opening) .page-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 480px) {
    body:has(.web-opening),
    body:has(.dm-opening),
    body:has(.mobile-opening),
    body:has(.commerce-opening),
    body:has(.enterprise-opening),
    body:has(.gov-opening),
    body:has(.ops-opening),
    body:has(.intel-opening),
    body:has(.comms-opening) {
        --service-hero-art-height: 270px;
    }
}