.cat-body{
    margin-top: 1rem;
}
.cat-body ul{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1rem;
}
.cat-body ul li{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0.8rem;
    margin: 0 auto;
    background: var(--bgcolor-Light);
}
.cat-body li.unactive{
    opacity: 0.3;
}
.cat-body li.unactive::before{
    position: absolute;
    inset: 0;
    scale: 1.1;
    background: transparent;
    content: '';
    z-index: 5;
}
.cat-body ul li .txt{
    padding: 0.2rem 2rem;
    position: absolute;
    right: -2rem;
    top: 1.5rem;
    font-size: 0.8rem;
    rotate: 47deg;
    color: var(--sg-bglight);
    background: var(--sg-color-brand);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.cat-body li .list-box{
    padding: 1rem;
}
.cat-body li .list-box .list-head .icon{
    min-width: 3rem;
    min-height: 3rem;
    margin-right: 0.5rem;
}
.cat-body li .subtitle{
    margin: 1rem auto;
}
.cat-body li .subtitle blockquote{
    align-items: initial;
    line-height: 1.6;
}
.cat-body li .subtitle blockquote .icon{
    min-width: 2.8rem;
    height: 2.8rem;
}
.cat-body li .text .btn{
    padding: 0rem 0.6rem;
    height: 2.2rem;
    border-radius: 40px;
    font-size: 0.9rem;
    color: var(--sg-color-brand);
    text-transform: capitalize;
    background: var(--sg-bglight);
    outline: 0.2rem solid #ff6c654d;
    outline-offset: -1px;
    transition: all ease-in-out 0.3s;
}
.cat-body li .text .btn:hover{
    outline: 0.5rem solid #ff6d653f;
}