/* ============================================================
   Zodiac Sprite Manager
   Works for /assets/zodiacSymbol/dogs.jpeg and cats.jpeg
   Just apply class .dogs or .cats
   ============================================================ */

.zodiac {
	width: 875px;
	height: 860px;
	background-size: 3584px 4800px;
	background-repeat: no-repeat;
	display: inline-block;
	border-radius: 50%;
}

/* Utility wrappers for small icon usage (e.g., in lists) */
.z-wrap { width: 36px; height: 36px; overflow: hidden; display: inline-block; }
.z-scale-sm .zodiac { transform: scale(0.04); transform-origin: top left; }

/* Large icon option for prominent display */
.z-wrap-lg { width: 200px; height: 200px; overflow: hidden; display: inline-block; }
.z-scale-lg .zodiac { transform: scale(0.2273); transform-origin: top left; }

/* === Image Sources ===================================================== */

.zodiac.dogs {
	background-image: url("/assets/zodiacSymbol/dogs.jpeg");
}

.zodiac.cats {
	background-image: url("/assets/zodiacSymbol/cats.jpeg");
}

.zodiac.birds {
	background-image: url("/assets/zodiacSymbol/birds.jpeg");
}

.zodiac.horses {
	background-image: url("/assets/zodiacSymbol/horses.jpeg");
}

/* === Positions (3×4 grid) ============================================== */
/*  Row 0: Aries, Taurus, Gemini */
/*  Row 1: Cancer, Leo, Virgo */
/*  Row 2: Libra, Scorpio, Sagittarius */
/*  Row 3: Capricorn, Aquarius, Pisces */

.zodiac.aries        { background-position:    -300px     -200px; }
.zodiac.taurus       { background-position: -1365px     -200px; }
.zodiac.gemini       { background-position:-2425px     -200px; }

.zodiac.cancer       { background-position:    -300px  -1310px; }
.zodiac.leo          { background-position: -1365px   -1310px; }
.zodiac.virgo        { background-position:-2425px   -1310px; }

.zodiac.libra        { background-position:    -300px -2420px; }
.zodiac.scorpio      { background-position: -1365px  -2420px; }
.zodiac.sagittarius  { background-position:-2425px  -2420px; }

.zodiac.capricorn    { background-position:    -300px -3540px; }
.zodiac.aquarius     { background-position: -1365px  -3540px; }
.zodiac.pisces       { background-position:-2425px  -3540px; }