/* Анимации теперь управляются через data-animate="scale-down" в template.php */

.module-component-herobanner-style-4 .box {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: calc(100svh - var(--header-height) - var(--spacing-36));
    max-height: var(--max-height-window);
    padding: calc(78 * var(--rpx)) calc(60 * var(--rpx));
    border-radius: var(--radius-32);
    background: gray;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--bg-image);
}

.module-component-herobanner-style-4 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-80);
    mask-image: none;
    -webkit-mask-image: none;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: mask-image 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-mask-image 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-component-herobanner-style-4 .content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 55%;
}

.module-component-herobanner-style-4 .content-wrapper .description p{font: var(--font-p2);}




@media (max-width: 767px) {
    .module-component-herobanner-style-4 .box {background-image: var(--bg-image-mob);}
    
    .module-component-herobanner-style-4 .overlay {
        mask: none;
        -webkit-mask: none;
        background: var(--white-90);
    }

    .module-component-herobanner-style-4 .box {padding: var(--spacing-20);justify-content: end;}
    .module-component-herobanner-style-4 .content-wrapper .top {gap: var(--spacing-20);}
    .module-component-herobanner-style-4 .content-wrapper .buttons {gap: var(--spacing-8);}
    .module-component-herobanner-style-4 .content-wrapper .description p:not(:last-child){margin-bottom: var(--spacing-8);}
}

@media (min-width: 768px) and (max-width: 1023px) {
    
}

@media (max-width: 1023px) {
    .module-component-herobanner-style-4 .content-wrapper {max-width: 100%;}
}

@media (min-width: 1024px) {
    .module-component-herobanner-style-4 .content-wrapper .description p{margin-bottom: 0;}
}