.hero-container {
    background-size: cover;
    background-position: center;
    min-height: 70vh;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Pushes it behind the text */

        /* Apply your background styles here */
        background:
            linear-gradient(to right, rgba(var(--bg-2-rgb), .9) 40%, rgba(var(--bg-2-rgb), .5) 100%),
            url('/imgs/assets/episodes/4/ep4_portrait.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        /* The Magic Sauce */
        filter: grayscale(100%);
    }
}

@media(min-width: 768px) {
    .hero-container::before {
        background-image:
            linear-gradient(to right, rgba(var(--bg-2-rgb), .9) 40%, rgba(var(--bg-2-rgb), .5) 100%),
            url('/imgs/assets/episodes/4/ep4.webp');
    }
}

.cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Pushes it behind the text */

    /* Apply your background styles here */
    background:
        linear-gradient(to right, rgba(var(--bg-2-rgb), .9) 40%, rgba(var(--bg-2-rgb), .5) 100%),
        url('/imgs/recording_studio_camera.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* The Magic Sauce */
    filter: grayscale(100%);
}

@media(min-width: 768px) {
    .cta::before {
        background-image:
            linear-gradient(to right, rgba(var(--bg-2-rgb), .95) 40%, rgba(var(--bg-2-rgb), .7) 100%),
            url('/imgs/recording_studio_camera_banner.webp');
    }
}