.thumbnail-cat-section {
    position: relative;
    padding: 6.67rem 0 5.4rem;


    &:before {
        content: '';
        position: absolute;
        top: -4rem;
        left: 0;
        bottom: 0;
        width: 32rem;
        max-width: 50%;
        background-image: url('/portals/0/images/flower-bg-1.svg');
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 100%;
        z-index: 0;
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24rem;
        max-width: 50%;
        background-image: url('/portals/0/images/flower-bg-2.svg');
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 100%;
        z-index: 0;
    }

    .title-container {
        position: relative;
        z-index: 1;
    }

    .cat-list {
        position: relative;
        text-align: center;
        padding: 1.5rem 0 0;
        z-index: 1;

        .item {
            width: 100%;
            padding: 1.06rem;
            background: var(--White) url(/portals/0/svg/box-background.svg) no-repeat center center;
            background-size: 90%;

            .img-box {
                width: 13.3rem;
                max-width: 100%;
                aspect-ratio: 1/1;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .title {
                font-size: 1.06rem;
                font-weight: 700;
                margin: 1.6rem 0 0;
            }
        }
    }

    .controller {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        margin-top: 1.1rem;
        z-index: 1;

        .navigation {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 50%;
            filter: drop-shadow(0px 4px 8px rgba(96, 97, 112, 0.16)) drop-shadow(0px 0px 2px rgba(40, 41, 61, 0.04));
            border: solid 1px var(--darken-color-3);
            flex-shrink: 0;
            z-index: 1;
            cursor: pointer;

            svg {
                width: 1rem;
                height: 1rem;
                fill: none;
                stroke: var(--darken-color-3);
            }
        }

        .swiper-pagination {
            position: relative;
            flex-shrink: 0;
            width: auto;
            bottom: auto;
            top: auto;
            left: auto;

            .swiper-pagination-bullet {
                cursor: pointer;
                width: 0.5rem;
                height: 0.5rem;
                background: var(--darken-color-3);


                &.swiper-pagination-bullet-active {
                    background: var(--accent-color);
                    opacity: 1;
                }
            }
        }

    }

    @media(max-width:760px) {
        padding: 1.6rem 0 2.6rem;
    }
}