.wp-block-group {
    &:has(.swiper) {
        overflow-x: hidden;
    }
}

.swiper {
    padding-bottom: var(--wp--preset--spacing--large-tertiary);

    .swiper-button-prev,
    .swiper-button-next {
        top: auto !important;
        bottom: 0 !important;
        border: 2px solid var(--wp--preset--color--black);
        color: var(--wp--preset--color--black);
        padding: 10px;
        background-color: white;
        right: auto !important;
        left: 0px !important;
        transition: all 0.25s;

        svg {
            width: 12px;
        }

        &:hover {
            background-color: var(--wp--preset--color--primary) !important;
            color: white;
        }
    }

    .swiper-button-next {
        left: auto !important;
        right: 0 !important;
    }
}

@media screen and (max-width: 782px) {
    .swiper {
        padding-bottom: 100px;
    }
}

.has-purple-background-color {
    .swiper {
        .swiper-button-prev,
        .swiper-button-next {
            border: 2px solid white;
            color: var(--wp--preset--color--purple);
            background-color: white;

            &:hover {
                background-color: transparent;
                color: white;
            }
        }
    }
}

@media screen and (min-width: 992px) {
    .swiper {
        .swiper-button-next {
            left: 100px !important;
        }
    }
}