/* Eve WebTools — site home: each module tile shows its illustration.
   Load it after harmonised.css on /index.html (ships as /modules-art.css).

   The tile is two parts with no line between them:
     top     the module's illustration (/img/modules/<module>-tile.webp), fading out downwards
     bottom  the module mark and name, together, centred in the space left
   The picture is quiet at rest and brightens with the tile on hover / keyboard focus.
   Pictures are 512 x 448 (2x of 256 x 224), greyscale with a transparent background; same art as the share card. */

#appList .appWrappers { justify-content: flex-start; padding: 0; }

#appList .appWrappers::before {
    content: ""; display: block; flex: none; width: 100%; aspect-ratio: 256 / 224; pointer-events: none;
    background: var(--art) center / cover no-repeat;
    opacity: .55; transition: opacity .2s linear;
    -webkit-mask-image: linear-gradient(#000 45%, transparent 100%); mask-image: linear-gradient(#000 45%, transparent 100%);
}
#appList .appWrappers:hover::before, #appList a:focus-visible .appWrappers::before { opacity: .9; }

#appList .appLogos { height: auto; margin-top: auto; }
#appList .appLogos > svg { width: 104px; }
/* the name follows the tile width (tiles are clamp(160px, 14vw, 256px)), so "LedgerParser" stays inside a narrow tile */
#appList .appNames { height: auto; margin: 20px 0 auto; padding: 0 12px; text-align: center; font-size: clamp(1.4rem, 2.1vw, 2rem); }

#appAT  { --art: url(/img/modules/atlas-tile.webp); }
#appIP  { --art: url(/img/modules/intelparser-tile.webp); }
#appPIH { --art: url(/img/modules/planetary-tile.webp); }
#appTE  { --art: url(/img/modules/tether-tile.webp); }
#appFL  { --art: url(/img/modules/fitlab-tile.webp); }
#appLP  { --art: url(/img/modules/ledgerparser-tile.webp); }