.nxt-hero-element {
    --aspect-ratio: 24/9;
    --content-max-width: 820px;
    --content-header-banner-py: 64px;
    --page-basics-grid-margin-x: 20px;
    --content-header-content-header-min-height: 480px;

    --typography-headings-h1-font-size: 64px;
    --typography-headings-h1-line-height: 70.4px;

    --content-header-banner-padding: 20px;
    --content-header-banner-copy-mt: 30px;

    --content-header-banner-actions-mt: 30px;
}



@media (max-width: 1024px) {
    .nxt-hero-element {
        --content-header-content-header-min-height: 384px;
        --typography-headings-h1-font-size: 56px;
        --typography-headings-h1-line-height: 61.6px;
    }

    .nxt-hero-element .hero-content {
        --content-max-width: 790px;

    }
}

@media (max-width: 768px) {
    .nxt-hero-element {
        --content-header-content-header-min-height: 288px;
        --typography-headings-h1-font-size: 48px;
        --typography-headings-h1-line-height: 52.8px;
    }

    .nxt-hero-element .hero-content {
        --content-max-width: 100%;
    }
}

@media (max-width: 550px) {
    .nxt-hero-element {
        --content-header-content-header-min-height: 360px;
        --typography-headings-h1-font-size: 40px;
        --typography-headings-h1-line-height: 44px;
    }

    .nxt-hero-element .hero-content .hero-content-head {
        flex-direction: column;
        align-items: start !important;
    }

    .nxt-hero-element .button-wrapper {        
        justify-self: stretch !important;
    }

    .nxt-hero-element .button-wrapper .nxt-button {        
        width: 100%
    }
}

.nxt-hero-element {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--background-image) no-repeat;
    aspect-ratio: var(--aspect-ratio);
    background-size: cover;
    background-position: center;
    padding: var(--content-header-banner-py) var(--page-basics-grid-margin-x);
    min-height: var(--content-header-content-header-min-height);
    
}

.nxt-hero-element.has-content {
    aspect-ratio: unset;
}

.nxt-hero-element .hero-content {
    max-width: var(--content-max-width);
    width: 100%;
    padding: var(--content-header-banner-padding);    
}

.nxt-hero-element .hero-content.white-background {
    background-color: #ffffff;
}

.nxt-hero-element .hero-content .hero-content-head {
    display: flex;
    gap: 16px;
    align-items: center;
}

.nxt-hero-element .hero-content .hero-content-head .icon {
    height: 40px;
}

.nxt-hero-element .hero-content .hero-content-head .hero-content-head-title {
   font-size: var(--typography-headings-h1-font-size);
    font-style: normal;
    font-weight: 600;
    line-height: var(--typography-headings-h1-line-height); 
    margin: 0;
}

.nxt-hero-element .hero-content .hero-content-content {
    margin-top: var(--content-header-banner-copy-mt);   
}

.nxt-hero-element .hero-content .hero-content-head-title-text {
    margin: 0;
}

.nxt-hero-element .button-wrapper {
    padding-top: var(--content-header-banner-actions-mt);
    justify-self: end;
}