.espt-hero {
    position: absolute;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    height: 500px;
}

.espt-hero__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.espt-hero__inner {
    position: relative;
    z-index: 1;
}

.espt-hero .espt-circle {
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.8;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.espt-hero .espt-circle--blue {
    top: 30%;
    left: 5%;
    background: #b8d6ff;
}

.espt-hero .espt-circle--yellow {
    top: 15%;
    right: 5%;
    background: #ffe79d;
}

.espt-hero .espt-circle--peach {
    top: 60%;
    left: 47%;
    background: #ffc09e;
}

@media (prefers-reduced-motion: reduce) {
    .espt-hero .espt-circle {
        transition: none !important;
        will-change: auto;
    }
}