/* @group General */

@media only screen and (min-width : 0) and (max-width : 960px) {
    .promo-modules {
        padding-inline: 2.4rem;
    }
}


/* @group header */

.promo-modules .header {}

@media only screen and (min-width : 961px) {
    .promo-modules .header {
        margin-bottom: 7.7rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .promo-modules .header .wp-block-heading:last-of-type {
        margin-bottom: 1.6rem;
    }


}

/* @end */

/* @group slider */

.promo-modules {}

.promo-modules .splide__arrows {
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 1;

}

.promo-modules .splide__arrow {
    position: static;
    padding: .8rem;
    background-color: var(--dorado);
    transform: none;
    color: var(--crema-claro);
    opacity: 1;
    border-radius: 100%;
    overflow: hidden;

}

.promo-modules .splide__arrow path {
    fill: var(--crema-claro);
    scale: 2;
    translate: -0.5rem -0.5rem;
}

.promo-modules .splide__pagination {
    gap: 1.2rem;
}

.promo-modules .splide__pagination button {
    background: var(--marron);
    opacity: 1;

}

.promo-modules .splide__pagination button.is-active {
    background: var(--dorado);
    opacity: 1;
    width: .8rem;
    height: .8rem;
    padding: 0;

}

.promo-modules .splide__pagination {
    bottom: -3.5rem;
}

.promo-modules .splide .wp-block-buttons {
    margin-bottom: 0;
    padding-bottom: 0;
}

@media only screen and (min-width : 961px) {
    .promo-modules .splide__slide {
        width: 34.1rem;
    }

    .promo-modules .bp-multimedia {
        height: 45.5rem;
        margin-bottom: 4.5rem;
    }



    .promo-modules .splide {
        width: 107.5rem;
        padding-inline: 0.5rem;
    }

    .promo-modules .splide__arrows {
        top: 20.7rem;
        width: 119.7rem;
    }

    .promo-modules .splide .wp-block-buttons {
        margin-top: .45rem;
    }

    .promo-modules .header .wp-block-column {
        display: flex;
        align-items: start;
        flex-direction: column;
        justify-content: flex-end;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .promo-modules {
        padding-bottom: 1rem;
    }

    .promo-modules .splide__pagination {
        bottom: -3.3rem;
    }

    .promo-modules .row {
        /* max-width: 34.1rem !important; */
        margin-inline: auto;
    }

    .promo-modules .splide {
        margin: 3rem auto;
    }

    .promo-modules .splide__slide {
        flex-basis: auto !important;
    }

    .promo-modules .bp-multimedia {
        height: 45.3rem;
        margin-bottom: 3.7rem;
    }

    .promo-modules .splide__arrows {
        top: 21.4rem;
        width: calc(100% + 4rem);
    }

    .promo-modules :is(.splide__list, #important) {
        justify-content: initial !important;
        align-items: initial !important;
    }

    .promo-modules .splide__arrow {
        padding: 1.2rem;
    }

    .promo-modules .splide .wp-block-buttons {
        margin-top: 2.5rem;
    }

}

/* @end */

/* CMS */

.promo-modules .block-editor-block-list__block .splide__list {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
}

/* SCROLL BAR */
.promo-modules .splide__list::-webkit-scrollbar {
    width: 1.2rem;
    height: 1.2rem;
}

.promo-modules .splide__list::-webkit-scrollbar-thumb {
    background-color: var(--wp-admin-theme-color);
}

.promo-modules .splide__list::-webkit-scrollbar-thumb:hover {
    background-color: var(--soft-cream);
}

.promo-modules .splide__list::-webkit-scrollbar-track {
    background-color: var(--white);
}

@media only screen and (min-width : 961px) {
    .promo-modules .splide__list {
        /* gap: 3rem; */
    }

    .promo-modules {
        padding-bottom: 4rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {}

/* @end */