.hero {
    background:
        linear-gradient(90deg, rgba(1, 20, 57, .98) 0%, rgba(2, 36, 98, .93) 34%, rgba(2, 41, 107, .40) 61%, rgba(2, 28, 75, .08)),
        url('/hero-security.png') center / cover no-repeat;
}

.hero-pattern {
    opacity: .22;
    background: linear-gradient(90deg, rgba(3, 27, 78, .3), transparent 58%), repeating-linear-gradient(90deg, transparent 0 95px, rgba(255, 255, 255, .07) 96px 97px);
}

.hero-grid { grid-template-columns: 1fr; }

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