.nxt-product-hero-element {
    --aspect-ratio: 32/9;
    --content-max-width: 930px;
    --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;

    --icon-height: 96px;
}



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

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

    }
}

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

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

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

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

    .nxt-product-hero-element .hero-content .hero-content-head .hero-content-head-title {
        text-align: center;
    }
}

.nxt-product-hero-element {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;

    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-product-hero-element.repeat-background {
    background-repeat: repeat !important;
    background-size: auto;
}


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

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

.nxt-product-hero-element .hero-content .hero-content-head .icon {
    height: var(--icon-height);
    width: auto;
}

.nxt-product-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;
}