Need help with visual artifacts with card-mod and banner-card

Configuration
1

I made a banner-card with card-mod customization for guest wireless information. While this shows up perfectly on my PC browser and HA app on iOS, I’m using a Fire 10 HD with Fully Kiosk. It shows the card with weird border artifact that I can’t figure out how to get rid of.

This is my current card configuration

entities:
  - entity: sensor.guest_network
    name: NETWORK
  - entity: sensor.guest_username
    name: USERNAME
  - entity: sensor.guest_password
    name: PASSWORD
heading:
  - 'mdi:wifi'
  - Guest Wireless
style: |
  ha-card {
    overflow: hidden;
  }
  ha-card .heading {
    color: white;
    font-size: 20px;
    font-weight: 450;
    margin-top: 20px;
    margin-bottom: 15px;
  }
  ha-card .entity-value {
    font-family: Courier New;
    font-size: 18px;
    margin-bottom: 10px;
  }
type: 'custom:banner-card'