.grid-container {
    display: grid;
}

.grid-item {
    grid-column: 1 / 2;
    padding-right: 1rem;
    max-width: 70%;
}

@media (prefers-color-scheme: dark) {
    .bg {
        background-image: linear-gradient(to left, transparent, #212121), image-set(var(--img));
    }
}

@media (prefers-color-scheme: light) {
    .bg {
        background-image: linear-gradient(to left, transparent, #fff),
            image-set(var(--img));
    }
}

.bg {
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: right;
}

body {
    grid-template-columns: 1fr min(60rem, 90%) 1fr;
}

@media(max-width: 900px) {
    .bg {
        background-image: none;
        background-position: right;
    }

    .grid-item {
        grid-column: 1 / 2;
        padding-right: 1rem;
        max-width: 100%;
    }
}