Why razor.css file not working in Blazor WebAssembly?

Question

I am following one tutorial and CSS worked for Shared razor pages. First example works fine and does everything it needs, but the second does not load CSS. No color changes or image size.

@inject IProductService ProductService
@if(ProductService.Products == null || ProductService.Products.Count == 0)
{
    <span>Loading products...</span>
}
else
{
    <ul class="list-unstyled">
        @foreach (var product in ProductService.Products)
        {
            <li class="media my-3">
                <div class="media-image-wrapper mr-2">
                    <a href="/product/@product.Id">
                        <img class="media-img" src="@product.ImageUrl" alt="@product.Title">
                    </a>
                </div>
                <div class="media-body">
                    <a href="#">
                        <h4 class="mb-0">@product.Title</h4>
                    </a>
                    <p>@product.Description</p>
                    <h5 class="price">$@product.Price</h5>
                </div>
            </li>
        }
    </ul>
}
@code {
    protected override async Task OnInitializedAsync()
    {
        await ProductService.GetProducts();
    }
}
 

CSS FILE

    .media-img{
    max-height: 200px;
    max-width: 200px;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: transform .2s;
}
.media-img:hover{
    transform: scale(1.1);
}

.media{
    display:flex;
    align-items: flex-start;
}
.media-body{
    flex: 1;
    margin-left: 20px;
}

media-img-wrapper{
    width:  200px;
    text-align: center;
}


@media(max-width: 1023.98px)
{
    .media{
        flex-direction: column;
    }
    media-img-wrapper{
        width: 100%;
        height: auto;
    }
}
    

But when I try to do the same in the Pages folder

@page "/product/{id:int}"
@inject IProductService ProductService

@if(product == null)
{
    <span>Message</span>
}
else
{
    <div class="media">
        <div class="media-img-wrapper mr-2">
            <img class="media-img" src="@product.ImageUrl" alt="@product.Title">
        </div>
        <div class="media-body">
            <h2 class="mb-0">@product.Title</h2>
            <p>@product.Description</p>
            <h4 class="price">
                $@product.Price
            </h4>
        </div>
    </div>
}


@code {
    private Product? product = null;
    private string Message = string.Empty;

    [Parameter]
    public int Id { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        Message = "Loading Product...";

        var result = await ProductService.GetProductAsync(Id);
        if(!result.Success)
        {
            Message = result.Message;
        }
        else
        {
            product = result.Data;
        }
    }
}
}
    

I added another CSS file and even tried to add wwwroot/css/app.css

.media-img{
max-height: 500px;
max-width: 500px;
border-radius: 6px;
margin: 0  10px 10px 10px;
}

.media-img-wrapper {
    max-width: 500px;
    max-height: 500px;
    text-align: center;
}

@media(max-width:  1023.98px)
{
    .media-img {
        max-width: 300px;
    }
    .media-img-wrapper{
        width:100%;
        height: auto;
    }
}

It does not work. The only difference I can spot is that On pages folder files have a green + sign, while in Shared they have a red V. Files difference