html {
    background: linear-gradient(180deg, rgba(23, 156, 83, 0.7), rgba(23, 156, 83, 0.7));
    position: relative;
    min-height: 100vh;
}

@media (min-width: 769px) {
    html::before,
    html::after {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        width: 45%; /* 45% + 45% + 10% gap = 100% */
        z-index: -1;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    html::before {
        left: 0;
        background-image: url('images/bg-left.jpg');
        /* Fading effect: gradient from transparent to opaque on the right edge */
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    }

    html::after {
        right: 0;
        background-image: url('images/bg-right.jpg');
        /* Fading effect: gradient from transparent to opaque on the left edge */
        mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    }
}

@media (max-width: 768px) {
    html::before,
    html::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        height: 45%; /* 45% + 45% + 10% gap = 100% */
        z-index: -1;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    html::before {
        top: 0;
        background-image: url('images/bg-left.jpg');
        /* Fading effect: gradient from opaque to transparent at the bottom */
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    }

    html::after {
        bottom: 0;
        background-image: url('images/bg-right.jpg');
        /* Fading effect: gradient from transparent to opaque at the top */
        mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
    }
}