Overriding isolated .css style in Blazor component

If I have a Blazor component with css:

.mycomponent {
    height: 100%;
    width: 100%;
}

And a (parent) main layout with it's own css:

.layout-default {
    height: 100%;
    width: 100%;        
    grid-template-columns: 4fr 3fr 3fr;
}

.layout-default .mycomponent {
    grid-column: 1/span 2;
}

It doesn't work. Any styles applied in the layout css doesn't apply to the component at render time.

Layout markup is simply:

<div class="layout-default">
    <mycomponent />
</div>

The Razor component is just a basic element as well:

<div class="mycomponent">  
    <span>hello</span>
</div>