/* Storetasker /pricing, "hiring" section: three calendar-dot graphics. Every class is prefixed cal. */
/* one graphic: a photo that gets progressively blurrier toward the bottom, with a month of day dots sitting directly on it */
.cal{position:relative;width:100%;aspect-ratio:838/880;container-type:inline-size;overflow:hidden;background:#3a3632 center / cover no-repeat;font-family:inherit;text-align:left}
.cal *{box-sizing:border-box}
.cal-b1,.cal-b2,.cal-sh{position:absolute;inset:0;background:center / cover no-repeat}
.cal-b1{-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 18%, #000 56%);mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 18%, #000 56%)}
.cal-b2{-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 46%, #000 88%);mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 46%, #000 88%)}
.cal-sh{background:linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.38) 100%)}
.cal-in{position:absolute;inset:0;font-size:calc(100cqw / 26);display:flex;align-items:flex-end;justify-content:center;padding:1.7em 2.6em 2em;color:#fff;line-height:1}
.cal-card{width:100%;display:flex;flex-direction:column;gap:.7em}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));justify-items:center}
.cal-head span{font-size:.62em;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.82)}
.cal-grid{row-gap:.4em}
.cal-grid i{position:relative;display:block;width:1.12em;height:1.12em}
.cal-grid i::before{content:"";position:absolute;left:50%;top:50%;width:.34em;height:.34em;margin:-.17em;border-radius:50%;background:rgba(255,255,255,.5)}
.cal-grid i.on::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;opacity:var(--o,0);transform:scale(var(--s,.4))}