body > :is(header, header.header-sticky) {

    --_widht: 100%;
    --_height: 16vmin;
    
    min-width: var(--_widht);
    height: clamp(12vmin, var(--_height), 8.44dvh);
    
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--spacing);
    align-self: flex-start;
    
    a[role="img"], a:has(img.logo) {
        display: flex;
        align-items: center;
    
        & :is(img, svg, em) {
            box-sizing: content-box;
            border: var(--primary) .4vmin solid;
        }
    }
}

body > header.header-sticky {

    --_header-top-position: 0;

    position: sticky;
    top: var(--_header-top-position, 0);
    z-index: 100;
}