/*
 * Service/marketing landing-page heroes.
 *
 * These CMS heroes carry `min-h-[calc(100vh-88px)]`, pinning them to the
 * viewport and leaving large empty bands above and below the copy and lead
 * form. Size them to their content instead.
 *
 * The attribute selector matches only the heroes carrying that viewport
 * min-height, leaving already content-sized heroes (e.g.
 * /magento-2-development-services) untouched. It also outranks the Tailwind
 * utility on specificity, so no !important is needed.
 */

.tm-hero[class*="min-h-[calc(100vh"] {
    min-height: 0;
    padding-top: 4rem;
    /* Clears the absolutely positioned wave divider at the foot of the hero. */
    padding-bottom: 6rem;
}

/* Below 900px the hero grid collapses to one column and already exceeds the
   viewport height, so only the padding needs trimming. */
@media (max-width: 900px) {
    .tm-hero[class*="min-h-[calc(100vh"] {
        padding-top: 2.5rem;
        padding-bottom: 4rem;
    }
}