/* ------------------------------
 * Group Horizontal Scroll
 * ------------------------------ */

.wp-block-group.is-style-x-scroll {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--wp--preset--spacing--30) !important;

    max-width: 100% !important;
    padding: var(--wp--preset--spacing--30);
    align-items: center;

    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wp--preset--color--primary);
    scroll-behavior: smooth;
}

/* prevents children shrinking */

.wp-block-group.is-style-x-scroll > * {
    flex: 0 0 auto;
    margin: 0;
}

/* ------------------------------
 * Responsiveness
 * ------------------------------ */

@media (min-width: 1080px) {
    .wp-block-group.is-style-x-scroll {
        padding: var(--wp--preset--spacing--30)
                 min(410px, max(30px, ((100vw - 1080px) * 0.5 + 30px)));
    }
}