Making card on top of the item

[anuj9196]

I am designing a layout like

I have the HTML defined as

<ion-content>

    <ion-item color="primary">

        <ion-grid fixed padding padding-top padding-bottom class="auth-header">
            <ion-row>
                <ion-col text-center>
                    <ion-item lines="none" color="transparent">
                        <ion-img src="./assets/images/logo/no11_100.png" class="auth-logo"></ion-img>
                    </ion-item>
                </ion-col>
            </ion-row>

            <ion-row>
                <ion-col text-center>
                    <ion-item lines="none" color="transparent">
                        <ion-label text-center class="label-solid">Login</ion-label>
                    </ion-item>
                </ion-col>
            </ion-row>
        </ion-grid>

    </ion-item>

    <ion-item lines="none">

        <ion-grid>
            <ion-row>
                <ion-col>

                    <ion-card class="auth-card">
                        <ion-card-content>

                            <-- form content here -->

                        </ion-card-content>
                    </ion-card>

                </ion-col>
            </ion-row>
        </ion-grid>

    </ion-item>
</ion-content>

Which looks like

Here the top of the card is hidden behind the blue background.

I have added following CSS

:root {
  .auth-card {
    margin-top: -50px;
  }
}

How could I bring it to top?