/* Sprite sheet CSS for sprite-sheet.png (1600x2079, 2 columns of 800px) */
/* Scales to container width. background-size: 200% auto makes each column
   fill the element exactly. Y% = originalY / (2079 - spriteHeight) * 100 */

.sprite-sheet {
    display: block;
    width: auto;
    max-width: 40em;
    background-image: url('./sprite-sheet.png');
    background-repeat: no-repeat;
    background-size: 200% auto;
}

/* LNSY — y=0, h=330 */
.sprite-lnsy-pink {
    aspect-ratio: 800 / 330;
    background-position: 0% 0%;
}
.sprite-lnsy-yellow {
    aspect-ratio: 800 / 330;
    background-position: 100% 0%;
}

/* Hacker / — y=230, h=225  →  230/1854 = 12.41% */
.sprite-hacker-pink {
    aspect-ratio: 800 / 225;
    background-position: 0% 18.41%;
}
.sprite-hacker-yellow {
    aspect-ratio: 800 / 225;
    background-position: 100% 18.01%;
}

/* Painter — y=455, h=225  →  455/1854 = 24.54% */
.sprite-painter-pink {
    aspect-ratio: 827 / 225;
    background-position: 0% 31.54%;
}
.sprite-painter-yellow {
    aspect-ratio: 827 / 225;
    background-position: 100% 31.54%;
}

/* Vibe Coaching — y=680, h=195  →  680/1884 = 36.09% */
.sprite-vibe-coaching-pink {
    aspect-ratio: 1375 / 195;
    background-position: 0% 43.09%;
}
.sprite-vibe-coaching-yellow {
    aspect-ratio: 1375 / 195;
    background-position: 100% 43.09%;
}

/* github — y=875, h=220  →  875/1859 = 47.07% */
.sprite-github-pink {
    aspect-ratio: 692 / 220;
    background-position: 0% 53.07%;
}
.sprite-github-yellow {
    aspect-ratio: 692 / 220;
    background-position: 100% 53.07%;
}

/* resume — y=1095, h=215  →  1095/1864 = 58.74% */
.sprite-resume-pink {
    aspect-ratio: 1062 / 215;
    background-position: 0% 63.74%;
}
.sprite-resume-yellow {
    aspect-ratio: 1062 / 215;
    background-position: 100% 63.74%;
}

/* music — y=1310, h=215  →  1310/1864 = 70.28% */
.sprite-music-pink {
    aspect-ratio: 931 / 215;
    background-position: 0% 73.28%;
}
.sprite-music-yellow {
    aspect-ratio: 931 / 215;
    background-position: 100% 73.28%;
}

/* zines — y=1525, h=210  →  1525/1869 = 81.59% */
.sprite-zines-pink {
    aspect-ratio: 800 / 210;
    background-position: 0% 83.59%;
}
.sprite-zines-yellow {
    aspect-ratio: 800 / 210;
    background-position: 100% 83.59%;
}

/* blog — y=1735, h=344  →  1735/1735 = 100% */
.sprite-blog-pink {
    aspect-ratio: 980 / 344;
    background-position: 0% 100%;
}

.sprite-blog-yellow {
    aspect-ratio: 980 / 344;
    background-position: 100% 100%;
}