.org-case-block {
    @apply relative;

    .vebego-container > .atm-heading {
        @apply text-secondary-col-1 mb-8;
    }

    .org-case-block-list {
        @apply grid grid-cols-1 gap-8;

        .org-case-block-list-item {
            @apply bg-primary bg-opacity-10 border border-primary border-opacity-20 rounded-xl overflow-hidden cursor-pointer text-left;

            .atm-image img {
                @apply h-[380px] object-cover w-full aspect-video md:aspect-auto;
            }

            .list-item {
                @apply grid gap-4 md:items-center justify-between p-8;

                @media (min-width: 769px) {
                    grid-template-columns: 1fr auto;
                }

                .atm-heading {
                    @apply m-0;
                    word-break: break-word;
                }

                .atm-paragraph * {
                    @apply m-0;
                }
            }
        }
    }

    .swiper-navigation {
        @apply absolute flex justify-between w-full bottom-4 sm:bottom-8 md:bottom-16 px-4 sm:px-16 xl:px-0 lg:-translate-x-1/2 lg:left-1/2 xl:-translate-y-1/2 xl:top-1/2 h-max max-w-7xl;
        
        .swiper-prev,
        .swiper-next {
            @apply cursor-auto;
        }

        .swiper-prev.swiper-button-disabled .atm-button,
        .swiper-next.swiper-button-disabled .atm-button {
            @apply bg-gray-300 cursor-not-allowed pointer-events-none transition-all;

            .atm-icon {
                @apply text-gray-500 transition-all;
            }
        }
    }

    .swiper-pagination {
        @apply relative mb-6 mt-8 px-20 sm:px-0 sm:my-6 flex justify-center items-center gap-x-2;

        .swiper-pagination-bullet {
            @apply bg-accent-1/50 w-12 rounded-full transition-all opacity-100;

            &.swiper-pagination-bullet-active {
                @apply bg-accent-1/100 w-20 transition-all;
            }
        }
    }

    .swiper-grid {
        @apply h-full;
        .swiper-wrapper {
            .swiper-slide {
                @apply bg-white grid lg:grid-cols-2 lg:items-center rounded-b-3xl sm:rounded-3xl overflow-y-auto overflow-x-hidden;

                @media (max-width: 1024px) {
                    grid-template-rows: auto 1fr;
                }

                &--content {
                    @apply p-4 py-8 sm:p-8 lg:p-12 lg:overflow-y-auto lg:aspect-square flex lg:items-center;
                    word-break: break-word;

                    .content__wrapper {
                        @apply max-h-full;

                        &:has(.atm-button){
                            .atm-button {
                                @apply lg:mb-12;
                            }

                            .atm-paragraph {
                                @apply lg:pb-0;
                            }
                        }

                        .atm-heading.h3 {
                            @apply mb-2;
                        }

                        .atm-heading.h5 {
                            @apply text-gray-400;
                        }

                        .atm-paragraph {
                            @apply lg:pb-12;
                        }

                        .atm-paragraph p {
                            @apply text-md leading-6;
                        }
                    }
                }

                &--image {
                    @apply w-full lg:sticky lg:top-0 h-full aspect-video lg:aspect-square row-start-1 lg:row-auto;

                    .atm-image {
                        @apply h-full;

                        img {
                            @apply h-full w-full object-cover;

                            @media (max-width: 1024px) {
                                @apply aspect-video;
                            }
                        }
                    }
                }
            }
        }
    }

    .modal {
        @apply z-50 p-0 sm:p-8 md:p-16 bg-secondary-col-1/10 outline-none overflow-hidden grid-cols-1 fixed h-[100dvh] w-screen top-0 lg:items-center z-[9999];
        backdrop-filter: blur(10px);
        grid-template-rows: 1fr auto;

        @media (max-width: 640px) {
            @apply m-0 max-w-full max-h-full h-full gap-4 pb-4;
        }

        .modal-container {
            @apply overflow-hidden w-full max-w-xl lg:max-w-6xl mx-auto relative;
        }

        .modal-close {
            @apply absolute top-4 right-4 z-50;
        }
    }
}