.gem-art{height:112px;border-radius:8px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#fff9,transparent 65%),var(--gem-wash);margin:0 0 17px;overflow:hidden}
.gem-art .gem-symbol{position:relative;display:block;width:65px;height:70px;margin:0;transform:rotate(-9deg);opacity:1;border:0;border-radius:0;clip-path:polygon(30% 0,72% 3%,100% 33%,93% 74%,62% 100%,19% 90%,0 52%,9% 20%);background:conic-gradient(from 12deg at 48% 46%,var(--gem-light) 0deg 42deg,var(--gem-color) 42deg 90deg,var(--gem-dark) 90deg 140deg,var(--gem-color) 140deg 205deg,var(--gem-dark) 205deg 250deg,var(--gem-light) 250deg 293deg,var(--gem-color) 293deg 340deg,var(--gem-light) 340deg);filter:drop-shadow(0 9px 7px #19232a40)}
.gem-art .gem-symbol:before{content:'';position:absolute;inset:18%;clip-path:polygon(28% 0,80% 8%,100% 65%,51% 100%,0 68%,4% 22%);background:linear-gradient(135deg,var(--gem-light),var(--gem-color) 56%,var(--gem-dark));box-shadow:inset 0 0 12px #fff5}
.gem-art .gem-symbol:after{content:'';position:absolute;inset:0;background:linear-gradient(130deg,transparent 17%,#fff9 18%,#fff2 22%,transparent 26%,transparent 67%,#fff3 68%,transparent 72%)}
.gem-art .cabochon,.gem-art .banded{width:61px;height:75px;clip-path:none;border-radius:48% 48% 45% 45%;background:radial-gradient(ellipse at 28% 22%,#ffffffe0 0%,var(--gem-light) 10%,var(--gem-color) 39%,var(--gem-dark) 94%);box-shadow:inset -5px -7px 10px #0003,inset 2px 3px 6px #fff5,0 8px 10px #19232a26}
.gem-art .cabochon:before,.gem-art .banded:before{inset:0;clip-path:none;border-radius:inherit;background:radial-gradient(ellipse at 70% 65%,var(--gem-light),transparent 40%);opacity:.25;box-shadow:none}
.gem-art .cabochon:after,.gem-art .banded:after{inset:8px 16px 45px 10px;border-radius:50%;background:linear-gradient(125deg,#fffc,#fff0);transform:rotate(-25deg);filter:blur(1px)}
.gem-art .banded{background:repeating-linear-gradient(102deg,#4e2a10 0px,#8d5019 5px,#edb24c 10px,#ffe1a0 13px,#ab6a21 16px,#45260f 22px);box-shadow:inset -8px -8px 14px #0008,inset 4px 3px 10px #ffdd9280,0 8px 10px #19232a26}
.gem-color{display:inline-block;font-size:9px;color:#67725d;margin:0 0 9px}

.gem-art-realistic{background:#fffaf0;height:140px}.gem-photo{display:block;width:min(132px,100%);height:auto;aspect-ratio:1 / 1;background-image:url("/gemstones-round-realistic.png");background-size:500% 500%;background-repeat:no-repeat;border-radius:50%;overflow:hidden;max-width:100%}

/* Match the Five Elements Atlas gemstone groups and responsive tiles. */
.zodiac-gemstone-guide .gem-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.zodiac-gemstone-guide .gem-group h4{font-size:17px}
.zodiac-gemstone-guide .gem strong{font-size:11px}
.zodiac-gemstone-guide .gem{min-width:0}
@media(max-width:760px){.zodiac-gemstone-guide .gem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.zodiac-gemstone-guide .gem-grid{grid-template-columns:1fr}}