/* Keep the square source tiles in their original proportions. */
.atlas{position:relative;overflow:hidden;background-image:none;background-color:#f4ecdf}
.atlas::before{content:"";position:absolute;inset:auto;left:50%;top:50%;width:100%;height:auto;aspect-ratio:1;background-image:url('assets/ingredient-atlas.png');background-size:200% 200%;background-repeat:no-repeat;transform:translate(-50%,-50%);pointer-events:none}
.atlas.powder::before{background-position:0 0}
.atlas.liquid::before{background-position:100% 0}
.atlas.botanical::before{background-position:0 100%}
.atlas.gel::before{background-position:100% 100%}
.library-page .catalog{max-width:1440px;margin-inline:auto}
.library-page .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.library-page .card-image{height:auto;aspect-ratio:1;flex:none}
.card-image .badge{z-index:1}
.category-teaser>.atlas{height:auto;aspect-ratio:4/3}
.category-teaser>.atlas>span{z-index:1}
.detail-art{height:auto;aspect-ratio:1;width:100%;max-width:330px;margin:0 auto 24px;border-radius:9px}
@media(max-width:1100px){.library-page .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:600px){.library-page .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.library-page .card-copy{padding:13px 12px 0}.library-page .card h3{font-size:13px;min-height:0}.library-page .card p{font-size:10px;line-height:1.8;margin-top:10px}.library-page .card-bottom{margin:0 12px;align-items:start;gap:9px}.library-page .detail-link{font-size:10px}.detail-art{max-width:280px}}
@media(max-width:360px){.library-page .cards{grid-template-columns:1fr}}