.org-article-block {
    .article-block-top {
        @apply flex justify-between items-center sm:mb-10 mb-4 vebego-container;

        .atm-heading {
            @apply text-secondary-col-1 mb-0;
        }

        .pagination {
            * {
                @apply transition;
            }
            .swiper-prev,
            .swiper-next {
                @apply focus:ring-2 cursor-pointer text-white bg-accent-1 h-11 w-11 rounded-full inline-flex justify-center items-center;

                &.swiper-button-disabled {
                    @apply opacity-50;
                    &:hover {
                        .atm-icon {
                            transform: translateX(0px);
                        }
                    }
                }

                &.hide-prevnext {
                    @apply hidden;
                }
            }

            .swiper-prev {
                @apply mr-4;
                &:hover {
                    .atm-icon {
                        transform: translateX(-2px);
                    }
                }
            }
            .swiper-next:hover {
                .atm-icon {
                    transform: translateX(2px);
                }
            }
        }
    }

    .swiper-container {
        @apply mb-8;

        @media screen(lg) {
            @apply vebego-container;
        }

        @media (max-width: 1024px) {
            padding-right: calc(100vw - 768px + 64px);
        }

        @media (max-width: 768px) {
            padding-right: calc(100vw - 640px + 32px);
        }

        @media (max-width: 640px) {
            padding-right: 32px;
        }

        .swiper-wrapper {
            @apply pb-6 pr-8;

            .swiper-slide {
                @apply relative;

                @media (max-width: 1024px) {
                    transform: translateX(calc(100vw / 2 - 768px / 2 + 32px));
                }

                @media (max-width: 768px) {
                    transform: translateX(calc(100vw / 2 - 640px / 2 + 16px));
                }

                @media (max-width: 640px) {
                    transform: translateX(16px);
                }

                h4.atm-heading {
                    @apply text-h5 sm:text-h4;
                }

                &:after {
                    content: '';
                    @apply absolute h-full w-[2px] left-0 top-0 bg-white;
                }

                .mol-card-extended div {
                    @apply pl-[2px];
                }
            }
        }
    }
}