/**
 * Styling for the scroller block.
 */

@keyframes scrollLoop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

section.scroller {
    max-width: unset;
    padding: unset;
}
section.scroller.background-a {
    background-color: var(--color-bg-surface-1);
}

section.scroller .content {
    margin: 0 auto;
    padding: var(--spacing-12) var(--default-padding);
    width: 100%;
    max-width: var(--max-width);
    box-sizing: border-box;
}

section.scroller .text-pane {
    grid-column: 1 / 7;
    margin-bottom: var(--spacing-10);
}

section.scroller .text-pane .blurb {
    margin-top: var(--spacing-7);
    color: var(--color-copy-secondary);
}

section.scroller .scroll-viewport {
    margin: 0 calc(var(--default-padding) * -1);
    overflow: hidden;
}

section.scroller .scroll-pane {
    margin: 0 calc(var(--default-padding) * -1);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: var(--spacing-11);
}
section.scroller .scroll-pane.animate {
    animation-name: scrollLoop;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

section.scroller .scroll-pane > * {
    flex-shrink: 0;
}

/* Breakpoint L */
@media screen and (min-width: 1080px) and (max-width: 1320px) {
    section.scroller .text-pane {
        grid-column: 1 / 10;
    }
}

/* Breakpoints M and S */
@media screen and (min-width: 0px) and (max-width: 1080px) {
    section.scroller .text-pane {
        grid-column: 1 / -1;
    }
}

/* region Specific sizing for inner mega/image-item blocks */

section.scroller .scroll-pane section.image-item {
    width: 180px;
    height: 90px;
}

/* Breakpoint M */
@media screen and (min-width: 768px) and (max-width: 1080px) {
    section.scroller .scroll-pane section.image-item {
        width: 162px;
        height: 81px;
    }
}

/* Breakpoint S */
@media screen and (min-width: 0px) and (max-width: 768px) {
    section.scroller .scroll-pane section.image-item {
        width: 124px;
        height: 62px;
    }
}

/* endregion */