/*#heroimage:has(img) {*/
#heroimage {
    display: block; width: 100%; height: 0; padding-bottom: 50%;
    position: relative;overflow: hidden;
}

#heroimage picture { display: block; width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;  }

#heroimage picture img{ width:calc(100% + 2px); height: calc(100% + 2px);
    position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); object-fit: cover;
}


@media all and (max-width: 899px) {

    /*#heroimage:has(img)*/

    #heroimage {padding-bottom: 75%; }

}