.container {
    width: min(1100px, 90%);
    margin-inline: auto;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 4rem;
    align-items: center;
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-background {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            circle at top,
            rgba(10,132,255,.18),
            transparent 45%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(94,92,230,.12),
            transparent 50%
        );

}