.header {
    position: sticky;
    top: 0;
    container-name: header;
    container-type: scroll-state;
    z-index: 1;
}

.header-inner {
    float: left; /* Needed for scroll-state styles to take effect. ToDo: Research why. */
    width: 100%;
    height: var(--header-height-compact);
    border-bottom: 1px solid transparent;
    font-size: clamp(0.75rem, 3.25vw, 1.25rem);
    color: var(--secondary-color);
    fill: var(--secondary-color);
    transition: all var(--transition-duration);
}

@container header scroll-state(stuck: top) {
    .header-inner {
        border-bottom: 1px solid var(--medium-gray-color);
        background: var(--secondary-color);
        box-shadow: var(--element-shadow);
        color: var(--primary-color); /* Contols color of child text. */
        fill: var(--primary-color); /* Controls color of child SVG images. */
    }
}

@media (min-width: 1024px) {
    .header-inner {
        height: var(--header-height-full);
        font-size: clamp(0.75rem, 3.25vw, 1.5rem);
        
    }
    
    @container header scroll-state(stuck: top) {
        .header-inner {
            height: var(--header-height-compact);
            font-size: clamp(0.75rem, 3.25vw, 1.25rem);
        }
    }
}