/* Tutorial artwork generated as one nine-tile illustration atlas with the built-in image tool.
Art direction: distinct 3D payment card, secure terminal, file-sharing cloud, OBS monitor, alert bell, integration puzzle, toolkit, chess pieces and API braces; emerald green, white porcelain and midnight navy. No text or logos. Optimized artwork is served as a separate WebP asset. */
html body.mainpage .learning-items .litem{display:block;width:100%;}
html body.mainpage .learning-items .thumbnail{height:226px;display:grid;place-items:center;background:#0c1828;overflow:hidden;}
.learn-card-art{display:block;width:220px;max-width:100%;aspect-ratio:1;background-size:300% 300%;background-position:var(--art-x) var(--art-y);background-repeat:no-repeat;transition:transform .25s ease;}
html body.mainpage .litem:hover .learn-card-art{transform:translateY(-3px) scale(1.025);}
@media(max-width:600px){html body.mainpage .learning-items .thumbnail{height:200px;}.learn-card-art{width:196px;}}
@media(prefers-reduced-motion:reduce){.learn-card-art{transition:none;}html body.mainpage .litem:hover .learn-card-art{transform:none;}}
 .learn-art-payment-zarinpal{--art-x:0%;--art-y:0%;}
 .learn-art-payment-idpay{--art-x:50%;--art-y:0%;}
 .learn-art-sharing{--art-x:100%;--art-y:0%;}
 .learn-art-overlay{--art-x:0%;--art-y:50%;}
 .learn-art-backgrounds{--art-x:50%;--art-y:50%;}
 .learn-art-streamelements{--art-x:100%;--art-y:50%;}
 .learn-art-requirements{--art-x:0%;--art-y:100%;}
 .learn-art-rules{--art-x:50%;--art-y:100%;}
 .learn-art-api{--art-x:100%;--art-y:100%;}
.learn-card-art{background-image:url("/img/learn-tutorials-20261111.webp")}