body:not(:has(.header[is=sticky-header])) .section--scrolling-layers {
    --header-height: 0px;
}

.scrolling-layer-item {
    position: sticky;
    top: var(--header-height, 0);
    contain: layout;
}

.scrolling-layer-item__icon {
    padding: 2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-border)/50%);
    color: rgb(var(--color-foreground));
    background: linear-gradient(111.49deg, rgb(var(--color-foreground)/40%) -8.95%, rgb(var(--color-foreground)/1%) 114%);
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    position: relative;
}

.scrolling-layer-item__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(-45deg, rgb(var(--color-foreground)/50%), rgb(var(--color-foreground)/10%), rgb(var(--color-foreground)/50%));
    mask: linear-gradient(rgb(var(--color-background)/100%) 0 0) exclude, linear-gradient(rgb(var(--color-background)/100%) 0 0) content-box;
}

.scrolling-layer-item__media {
    flex: 0 0 540px;
    max-width: 50%;
}

@media (max-width: 767.98px) {
    .scrolling-layer-item__media {
        order: -1;
        flex: auto;
        width: 100%;
        max-width: 100%;
    }
    .scrolling-layer-item__icon {
        padding: 1rem;
    }
}