.module-component-history-style-1 {
    padding-top: 0 !important;
    padding-bottom: 0;
    position: relative;
}



.module-component-history-style-1 .gradient {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: calc(160 * var(--rpx));
    background: var(--gradient-background);
    z-index: 2;
}
.module-component-history-style-1 .gradient.top {transform: scaleY(-1);top: var(--header-height);}
.module-component-history-style-1 .gradient.bottom {bottom: 0;}



.module-component-history-style-1 h2 {
    position: sticky;
    top: calc(160 * var(--rpx));
    height: fit-content;
}



.module-component-history-style-1 .items {gap: calc(200 * var(--rpx));}



.module-component-history-style-1 .h3 {
    min-width: calc(90 * var(--rpx));
    min-height: calc(90 * var(--rpx));
    max-width: calc(90 * var(--rpx));
    max-height: calc(90 * var(--rpx));
    background: var(--white-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: var(--transition-slow);
}
.module-component-history-style-1 .item.in-view .h3 {
    background: var(--primary);
    color: var(--white-100);
}
.module-component-history-style-1 .item:not(:last-child) .h3::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    height: calc(200 * var(--rpx));
    width: calc(2 * var(--rpx));
    border-right: calc(2 * var(--rpx)) dashed var(--secondary);
    transition: var(--transition-slow);
}
.module-component-history-style-1 .item:not(:last-child).in-view .h3::before {border-right-color: var(--primary);}




@media (max-width: 767px) {
    .module-component-history-style-1 h2{position: unset;}

    .module-component-history-style-1 .gradient {height: calc(60 * var(--rpx));}
}

@media (min-width: 768px) and (max-width: 1023px) {
    .module-component-history-style-1 .gradient {height: calc(120 * var(--rpx));}
}

@media (max-width: 1023px) {
    
    

    .module-component-history-style-1 .items {gap: var(--spacing-60);}
    .module-component-history-style-1 .item {gap: var(--spacing-12);}
    .module-component-history-style-1 .item br{display: none;}
    .module-component-history-style-1 .h3{
        font: var(--font-p2);
        min-width: calc(40 * var(--rpx));
        min-height: calc(40 * var(--rpx));
        max-width: calc(40 * var(--rpx));
        max-height: calc(40 * var(--rpx));
    }
    .module-component-history-style-1 .h3::before{height: var(--spacing-72) !important;}

}

@media (min-width: 1024px) {
    
}