/* Unified compact hero for all Auto-Luta information pages. */
html body .al-info-page .al-info-hero,
html body .al-contact-page .al-contact-hero {
    box-sizing: border-box;
    height: 330px;
    min-height: 330px;
    padding: 40px 49% 40px 48px !important;
    overflow: hidden;
}

html body .al-info-page .al-info-hero > *,
html body .al-contact-page .al-contact-hero > * {
    position: relative;
    z-index: 2;
}

html body .al-info-page .al-info-hero h1,
html body .al-contact-page .al-contact-hero h1 {
    max-width: 520px;
    margin-bottom: 12px !important;
    font-size: 42px !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
}

html body .al-info-page .al-info-kicker,
html body .al-contact-page .al-contact-kicker {
    margin-bottom: 10px !important;
}

html body .al-info-page .al-info-lead,
html body .al-contact-page .al-contact-lead {
    max-width: 520px;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

html body .al-info-page .al-info-hero::after,
html body .al-contact-page .al-contact-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: -3%;
    bottom: -8%;
    display: block;
    width: 55%;
    height: 108%;
    background: url("../images/auto1.png") right bottom / contain no-repeat;
    opacity: .96;
    pointer-events: none;
}

@media (max-width: 1050px) {
    html body .al-info-page .al-info-hero,
    html body .al-contact-page .al-contact-hero {
        padding-right: 45% !important;
    }

    html body .al-info-page .al-info-hero::after,
    html body .al-contact-page .al-contact-hero::after {
        right: -7%;
        width: 54%;
        opacity: .82;
    }
}

@media (max-width: 900px) {
    html body .al-info-page .al-info-hero,
    html body .al-contact-page .al-contact-hero {
        height: 290px;
        min-height: 290px;
        padding: 34px 38px !important;
    }

    html body .al-info-page .al-info-hero h1,
    html body .al-contact-page .al-contact-hero h1 {
        max-width: 660px;
        font-size: 38px !important;
    }

    html body .al-info-page .al-info-hero::after,
    html body .al-contact-page .al-contact-hero::after {
        right: -8%;
        width: 58%;
        opacity: .16;
    }
}

@media (max-width: 560px) {
    html body .al-info-page .al-info-hero,
    html body .al-contact-page .al-contact-hero {
        height: auto;
        min-height: 0;
        padding: 30px 24px !important;
    }

    html body .al-info-page .al-info-hero h1,
    html body .al-contact-page .al-contact-hero h1 {
        font-size: 32px !important;
    }

    html body .al-info-page .al-info-hero::after,
    html body .al-contact-page .al-contact-hero::after {
        display: none;
    }
}