:root{--c-days:#e64522;--c-m1:#f39c34;--c-m3:#f2d24b;--c-m6:#5eab52;--c-plus:#e9f3e7}.donut{--size:100%;--inner-ratio:.4;--start:0deg;--s1:calc(var(--p1) * 1%);--s2:calc((var(--p1) + var(--p2)) * 1%);--s3:calc((var(--p1) + var(--p2) + var(--p3)) * 1%);--s4:calc((var(--p1) + var(--p2) + var(--p3) + var(--p4)) * 1%);width:var(--size);aspect-ratio:1;isolation:isolate;position:relative}@media (max-width:767px){.donut.-home{--inner-ratio:.5!important}}.donut__ring{background:conic-gradient(from var(--start), var(--c-days) 0, var(--c-m1) var(--s1), var(--c-m3) var(--s2), var(--c-m6) var(--s3), var(--c-plus) var(--s4), var(--c-plus) 100%);-webkit-mask:radial-gradient(circle at center, transparent calc(50% * var(--inner-ratio)), #000 0);-webkit-mask:radial-gradient(circle at center, transparent calc(50% * var(--inner-ratio)), #000 0);mask:radial-gradient(circle at center, transparent calc(50% * var(--inner-ratio)), #000 0);z-index:0;border-radius:50%;position:absolute;inset:0}.donut__center{text-align:center;z-index:1;place-items:center;line-height:1.3;display:grid;position:absolute;inset:0}.donut__holeBG{width:calc(var(--size) * var(--inner-ratio));height:calc(var(--size) * var(--inner-ratio));z-index:1;pointer-events:none;background:#fff;border-radius:50%;position:absolute;inset:50% 0 0 50%;transform:translate(-50%,-50%)}