How to eliminate line under a card

#1

I have created a list of two cards, when i apply the css effects to it, it show a line in the bottom border that i cant get rid of it

<ion-card class="size1">
            <ion-item href="/home" routerDirection="forward" class="item">
              <ion-label>Menu</ion-label>
            </ion-item>
          </ion-card>
.font{
    --ion-font-family: 'NunitoSans';
  }
  .size1{
    --ion-font-size: 115%;
    --ion-font-family: 'NunitoSans';
    background-color: var(--ion-color-step-800);
  }
  ion-list{
      --ion-background-color: transparent;
  }

  .item{
    color: var(--ion-color-step-150);     // to override global variable, dont use --ion
    ion-label{
    font-weight: bold;
    }
  }

  ion-card{
    background-color: var(--ion-color-light);
    box-shadow: 3px 3px 10px var(--ion-color-light-tint);
  }
}

It is inside the app component, so these are in the variable .scss, it’s the side menu component.
Untitled

#2

You can set the lines attribute to none to remove the line from under the ion-item.

See: https://ionicframework.com/docs/api/item#properties