#headBanimg>canvas,
#headBanimg>.jquery-ripples,
#headBanimg>.ripples-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: inherit;
}

#headBanimg .caption-container {
    position: absolute;
    left: 50%;
    bottom: var(--spacing-sm);
    transform: translateX(-50%);
    width: 70%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    color: var(--text-on-primary);
    font-size: var(--font-size-md);
    mix-blend-mode: normal;
    text-shadow: 0 1px 2px color-mix(in srgb, #000, transparent 70%);
}

#headBanimg::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 70%;
    border-bottom: 2px solid var(--color-accent-dark);
    z-index: 2;
}

@media (max-width: 768px) {
    #headBanimg {
        aspect-ratio: auto;
        /* let height be custom */
        height: 28vh;
        /* your existing rule */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
    }

    #headBanimg .caption-container {
        width: 98%;
        font-size: var(--font-size-xxs);
        bottom: var(--spacing-xs);
        text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
        padding: 0% 2% 0 2%;
    }

    #headBanimg::after {
        width: 97%;
    }
}