@layer components {
  .mascot {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    line-height: 0;
  }

  .mascot img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }
}

@layer components {
  /* Fade the baked-in CRT frame into the page without cropping the artwork. */
  .welcome-media, .boot-art {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 82%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    mix-blend-mode: lighten;
  }
  :root[data-theme='paper'] .welcome-media,
  :root[data-theme='paper'] .boot-art { mix-blend-mode: darken; }
}