.blog-categories-container{list-style:none;counter-reset:list;padding:0 1rem;max-width:800px;margin:0 auto}.blog-category-item{--stop: calc(100% / var(--length) * var(--i));--l:62%;--l2:88%;--h: calc((var(--i) - 1) * (180 / var(--length)));--c1:hsl(var(--h),71%,var(--l));--c2:hsl(var(--h),71%,var(--l2));position:relative;counter-increment:list;margin:2rem 0;padding:0;box-shadow:.1rem .1rem 1.5rem rgba(0,0,0,.3);border-radius:.25rem;overflow:hidden;background-color:#fff}.blog-category-item::before{content:'';display:block;width:100%;height:1rem;position:absolute;top:0;left:0;background:linear-gradient(to right,var(--c1) var(--stop),var(--c2) var(--stop))}.blog-category-link{display:block;text-decoration:none;color:inherit;padding:2rem 1rem 1rem}.blog-category-title{display:flex;align-items:baseline;margin:0 0 1rem;color: rgb(70 70 70);font-size:1.5rem}.blog-category-title::before{display:flex;justify-content:center;align-items:center;flex:0 0 auto;margin-right:1rem;width:3rem;height:3rem;content:counter(list);padding:1rem;border-radius:50%;background-color:var(--c1);color:#fff}.blog-category-description{padding:0 1rem 2rem;margin:0;line-height:1.6;color:#555}.blog-category-link:hover .blog-category-title{color:var(--c1)}.blog-category-link h2.blog-category-title{line-height:32px}.blog-category-link:hover .blog-category-title::before{background-color:hsl(var(--h),71%,50%);transform:scale(1.05);transition:all .3s ease}@media (min-width:40em){.blog-category-item{margin:3rem 0}.blog-category-link{padding:3rem 2rem 1rem}.blog-category-title{font-size:2.25rem;margin:0 0 2rem}.blog-category-title::before{margin-right:1.5rem}.blog-category-description{padding:0 2rem 3rem}}