Set responsive min-height on header logo image (on Avada Wordpress theme) to avoid layout shift (CLS) and increase Core Web Vitals

style.css

/* 
If uploading new logo image and changing logo image aspect ratio 
-> also change --logo-aspect-ratio variables below 
Tried to calculate aspect ratio automatically with :
--logo-aspect-ratio: calc(var(--logo-width)/6);
But it does not work 
*/
@media screen and (max-width: 420px) {
    .fusion-logo img {
        --cumulated-containers-padding: 60px;
        --logo-width: calc(100vw - var(--cumulated-containers-padding));
        /* --logo-aspect-ratio: calc(var(--logo-width)/6);*/ /* Does not work */
        --logo-aspect-ratio: 6;
        --logo-height: calc(var(--logo-width)/var(--logo-aspect-ratio));
        min-height: var(--logo-height);
    }
}
@media screen and (min-width: 421px) and (max-width: 800px) {
    .fusion-logo img { /* .fusion-header .fusion-mobile-logo img  */
        min-height: 60px;
    }
}
@media screen and (min-width: 801px) and (max-width: 988px) {
    .fusion-logo img { /* .fusion-header .fusion-standard-logo img */
        --cumulated-containers-padding: 60px;
        --logo-width: calc(100vw - var(--cumulated-containers-padding));
        --logo-aspect-ratio: 6;
        --logo-height: calc(var(--logo-width)/var(--logo-aspect-ratio));
        min-height: var(--logo-height);
    }
}
@media screen and (min-width: 988px) and (max-width: 1260px) {
    .fusion-logo img { /* .fusion-header .fusion-standard-logo img */
        --cumulated-containers-padding: 180px;
        --logo-width: calc(100vw - var(--cumulated-containers-padding));
        --logo-aspect-ratio: 6;
        --logo-height: calc(var(--logo-width)/var(--logo-aspect-ratio));
        min-height: var(--logo-height);
    }
}
@media screen and (min-width: 1260px) {
    .fusion-logo img { /* .fusion-header .fusion-standard-logo img */
        min-height: 180px;
    }
}