@inherits LayoutComponentBase

<PageTitle>CocktailWeb</PageTitle>

<div>
    <main class="bg-info">

        <container class="d-flex flex-column vh-100">
            <div style="height:56px">
                Row 1
            </div>
            <div class="flex-fill d-flex align-items-stretch bg-warning container-fluid overflow-auto p-3 px-4">
                <div class="row flex-nowrap gap-3 align-items-center">
                    <!--<div class="col bg-light border border-3 border-success" style="max-width:18rem;">-->
                    <div class="card" style="max-width:18rem; height:200px; ">
                        <img class="card-img-top" src="@($"/img/cocktail-default.jpg")" alt="Test">
                        <div class="card-body">
                            <h5 class="card-title">Testcocktail</h5>
                        </div>
                    </div>

                    <div class="card text-bg-info p-0" style="max-width:18rem; height:200px;">
                        <div class="card-img-top text-center" style="max-height:100%;">
                            <img class="img-fluid" style="max-height:100%; width:auto;" src="@($"/img/cocktail-default.jpg")" alt="Test">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
                        </div>
                    </div>

                    <div class="card text-bg-info p-0" style="max-width:18rem; height:200px;">
                        <img class="card-img-top img-fluid" src="@($"/img/cocktail-default.jpg")" alt="Test">
                        <div class="card-body">
                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
                        </div>
                    </div>

                    <div class="card text-bg-info" style="max-width:18rem; height:200px;">
                        <img class="card-img-top img-fluid" src="@($"/img/cocktail-default.jpg")" alt="Test">
                        <div class="card-body">
                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
                        </div>
                    </div>

                    <div class="card text-bg-info" style="max-width:18rem; height:200px;">
                        <img class="card-img-top img-fluid" src="@($"/img/cocktail-default.jpg")" alt="Test">
                        <div class="card-body">
                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
                        </div>
                    </div>

                    <div class="card text-bg-info" style="max-width:18rem; height:200px;">
                        <img class="card-img-top img-fluid" src="@($"/img/cocktail-default.jpg")" alt="Test">
                        <div class="card-body">
                            <h5 class="card-title">Testcocktail<br />Testzwei</h5>
                        </div>
                    </div>
                </div>
            </div>
        </container>
    </main>
</div>

@code {


}