/* =========================================================
   MOSAIC - Scrollable Block
   ========================================================= */

.mds-scrollable-block {
    --mds-scrollable-accent: var(--color-gold, #B88A58);

    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}


/* =========================================================
   MOVING CONTENT
   ========================================================= */

.mds-scrollable-block__inner {
    display: flow-root;
    position: relative;
    width: 100%;
    max-width: 100%;

    transform: translate3d(0, 0, 0);
    will-change: transform;

    /*
     * Important:
     * no CSS transition here.
     *
     * The position needs to react directly to page scrolling.
     */
}


/* =========================================================
   OPTIONAL GOLD ACCENTS
   Uses the same global Mosaic color variable.
   ========================================================= */

.mds-scrollable-block--accent-left
> .mds-scrollable-block__inner {
    border-left: 2px solid var(--mds-scrollable-accent);
    padding-left: 24px;
}


.mds-scrollable-block--accent-top
> .mds-scrollable-block__inner {
    border-top: 2px solid var(--mds-scrollable-accent);
    padding-top: 24px;
}


/* =========================================================
   MOBILE
   Default mobile breakpoint.

   JavaScript also handles the breakpoint selected in
   WPBakery, including 992px and 1200px.
   ========================================================= */

@media only screen and (max-width: 767px) {

    .mds-scrollable-block__inner {
        transform: none !important;
        will-change: auto;
    }

}


/* =========================================================
   PRINT
   Always render normally when printing.
   ========================================================= */

@media print {

    .mds-scrollable-block__inner {
        transform: none !important;
        will-change: auto;
    }

}