.tools-hero {
    position: relative;
    overflow: hidden;
    background: #253865 url('/images/conceptstep/hero-modern-learning.webp') center 42% / cover no-repeat;
}

.tools-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(25, 39, 63, .88) 0%,
        rgba(25, 39, 63, .72) 48%,
        rgba(25, 39, 63, .46) 100%
    );
    z-index: 0;
}

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

@media (max-width: 760px) {
    .tools-hero {
        background-position: 62% center;
    }

    .tools-hero::before {
        background: rgba(25, 39, 63, .72);
    }
}