.topics-container {
    display: flex;
    gap: 1rem;
    width: 100%;
    flex-direction: column;
    @media (width >= 768px) {
        gap: 20px;
        flex-direction: row;
        padding-right: 38px;
        max-width: 100%;
        margin: 0 auto;
    }
}

.topics-main-banner-container{
    border-radius: 8px;
    overflow: hidden;
    @media (width >= 768px) {
        width: calc(50% - 10px);
        border-radius: 4px;
    }
    img{
        height: 100%;   
        object-fit: cover;
    }
}

.topics-slide {
    padding-bottom: 33px;
    @media (width >= 768px) {
        width: calc(50% - 10px);
        padding: 0;
        margin: 0;
    }
    .splide__pagination{
        bottom: 0;
        gap: 4px;
        padding: 0;
        @media (width >= 768px) {
            right: -38px;
            top: 20%;
            bottom: 20%;
        }
        li{
            width: calc(33.33% - 2.66px);
            &:nth-child(2) button::before{
                content: "02";
            }
            &:nth-child(3) button::before{
                content: "03";
            }
            @media (width >= 768px) {
                width: 19px;
                height: calc(33.33% - 2.66px);
            }
        }
        button{
            padding: 0;
            width: 100%;
            position: relative;
            height: 18px;
            transform: none;
            border: none;
            background: none;
            margin: 0;
            display: block;
            @media (width >= 768px) {
                 height: 100%;
            }
            &::before{
                content: "01";
                width: 11px;
                height: 11px;
                position: absolute;
                top: 0;
                left: 0;
                font-family: var(--font-family-en);
                font-size: var(--text-en-10);
                color: var(--color-brown);
                @media (width >= 768px) {
                    left: 4px;
                    font-size: var(--text-en-10);
                }
            }
            &::after{
                content: "";
                width: 100%;
                height: 1px;
                position: absolute;
                bottom: 0;
                left: 0;
                background: var(--color-brown);
                @media (width >= 768px) {
                    height: 100%;
                    width: 1px;
                }
            }
            &.is-active{
                &::before{
                    color: var(--color-dark-brown);
                }
                &::after{
                    background: var(--color-dark-brown);
                }
            }
        }
    }
}

.topics-main-banner,
.topics-slide-banner {
    width: 100%;
    height: auto;
}