.infographic{--color: rgb(var(--color-foreground));--border-color: rgba(var(--color-foreground), .4);--border-width: 2px;color:var(--color);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);grid-template-areas:"origin type caffeine" "makes notes notes" "servings temp time";align-content:start;list-style-type:none;margin:0;padding:0;text-transform:uppercase;--horizontal-border: linear-gradient(to top, var(--border-color) var(--border-width), rgba(255, 255, 255, 0) var(--border-width));--vertical-border: linear-gradient(to right, var(--border-color) var(--border-width), rgba(255, 255, 255, 0) var(--border-width))}.infographic-container{container:root / inline-size}.infographic .cell{padding:12px}.infographic .cell:nth-child(7),.infographic .cell:nth-child(8){background-image:var(--vertical-border)}.infographic .cell:not(:nth-last-child(-n+3)){background-image:var(--horizontal-border)}.infographic .cell:nth-child(2),.infographic .cell:nth-child(3),.infographic .cell:nth-child(5){background-image:var(--horizontal-border),var(--vertical-border)}@container root (max-width: 300px){.infographic{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);grid-template-areas:"origin type" "caffeine makes" "notes notes" "servings temp" "time time"}.infographic .cell:nth-child(7){background-image:var(--vertical-border)}.infographic .cell:not(:last-child){background-image:var(--horizontal-border)}.infographic .cell:nth-child(2),.infographic .cell:nth-child(4),.infographic .cell:nth-child(7){background-image:var(--horizontal-border),var(--vertical-border)}}.infographic .origin{grid-area:origin}.infographic .type{grid-area:type}.infographic .caffeine{grid-area:caffeine}.infographic .notes{grid-area:notes}.infographic .servings{grid-area:servings}.infographic .temp{grid-area:temp}.infographic .time{grid-area:time}.infographic .icon{display:flex;flex-direction:column;align-items:center;justify-content:end;text-align:center;font-weight:700}.infographic .label{font-weight:600;font-size:14px;color:rgba(var(--color-foreground),.75);margin-bottom:8px;display:block}.infographic .info{font-weight:600;font-size:18px;margin-bottom:8px;display:block;color:rgba(var(--color-foreground))}.infographic .nowrap{text-wrap:nowrap}
/*# sourceMappingURL=/cdn/shop/t/18/assets/component-infographic.css.map */