.mol-image-slider {
    .swiper-container {
        @apply pb-12;

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

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

        @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-slide {
            > .slide-image {
                @apply relative h-0;

                padding-bottom: 75%;

                @screen md {
                    padding-bottom: 56.25%;
                }

                .atm-image {
                    @apply absolute w-full h-full;

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

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

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

            @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);
            }
        }

        .slider-navigation {
            @apply absolute top-1/2 -translate-y-1/2 left-0 pb-12 z-10 w-full;

            .slider-navigation-wrapper {
                @apply px-4 flex justify-between;

                .slider-navigation-button {
                    @apply bg-white w-12 h-12 rounded-full shadow flex justify-center items-center text-secondary-col-1 text-h5;

                    &.swiper-button-disabled {
                        @apply opacity-60;
                    }

                    > * {
                        @apply pointer-events-none;
                    }
                }
            }
        }

        .swiper-pagination {
            @apply bottom-0;

            &-bullet {
                @apply bg-secondary-col-2 bg-opacity-50 rounded-full transition-all duration-300;
                @apply p-1;

                &-active {
                    @apply bg-opacity-100 w-4;
                }
            }
        }
    }
}