.main{--s:180px;--m:8px;--f:calc(1.732*var(--s) + 4*var(--m) - 1px);--cm:40px;justify-content:center;display:flex}.container{width:calc((var(--s) + (var(--m)*2))*6);padding-bottom:calc(var(--s)*.2885);font-size:0}@media (max-width:1040px){.container{width:calc((var(--s) + (var(--m)*2))*4)}}@media (max-width:768px){.container{width:calc((var(--s) + (var(--m)*2))*3)}}@media (max-width:425px){.container{width:calc((var(--s) + (var(--m)*2))*2)}}.container:before{content:"";width:calc(var(--s)/2 + var(--m));float:left;shape-outside:repeating-linear-gradient(transparent 0,transparent calc(var(--f) - 3px),#000 0 var(--f));height:120%}.item{width:var(--s);margin:var(--m);height:calc(var(--s)*1.1547);font-size:initial;clip-path:polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);margin-bottom:calc(var(--m) - var(--s)*.2885);background:var(--item-color);color:var(--item-color);display:inline-block;position:relative}.item.darkColor{--item-color:#59595b}.item.lightColor{--item-color:#9a9a9a}.item.isCompleted.darkColor{--item-color:white}.item.isCompleted.lightColor{--item-color:#59595b}.item.isCompleted.lightColor:hover{--item-color:#59a5dd}.item:hover{--item-color:#4b5133}.content{top:calc((var(--cm)/2)*1.1547);left:calc(var(--cm)/2);width:calc(var(--s) - var(--cm));height:calc((var(--s) - var(--cm))*1.1547);clip-path:polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);cursor:pointer;background-color:#000;flex-flow:column;justify-content:center;padding:10px;display:flex;position:absolute}.content .name{font-size:30px;line-height:1}@media (max-width:768px){.content .name{font-size:20px}}.content .desc{font-size:12px;line-height:2}.content hr{border:5px solid var(--item-color)}.light .item{--item-color:#aaa}.light .item.isCompleted{--item-color:black}.light .content{background-color:#f7fafc}@media (max-width:768px){.main{--s:150px}}@media (max-width:425px){.main{--s:65px;--m:2px;--cm:10px}.content .desc{font-size:6px}.content hr{border-width:2px}}