.mrev-container,
.mrev-content {
  width: calc(100% - (var(--mrev-page-gutter, 16px) * 2));
  margin-inline: auto;
  box-sizing: border-box;
}
.mrev-container { max-width: var(--mrev-container, 1440px); }
.mrev-content { max-width: var(--mrev-content-lg, 1440px); }
.mrev-full-width { width: 100%; max-width: 100%; box-sizing: border-box; }
:root { --mrev-page-gutter: var(--mrev-gutter-mobile, 16px); }
@media (min-width: 550px) { :root { --mrev-page-gutter: var(--mrev-gutter-tablet, 24px); } }
@media (min-width: 1024px) { :root { --mrev-page-gutter: var(--mrev-gutter-laptop, 32px); } }
@media (min-width: 1440px) { :root { --mrev-page-gutter: var(--mrev-gutter-desktop, 48px); } }
@media (max-width: 1023px) {
  .mrev-stack-tablet { flex-direction: column !important; }
  .mrev-stack-tablet > .col { max-width: 100%; flex-basis: 100%; width: 100%; }
}
@media (max-width: 849px) {
  .mrev-stack-mobile { flex-direction: column !important; }
  .mrev-stack-mobile > .col { max-width: 100%; flex-basis: 100%; width: 100%; }
  .mrev-hide-mobile { display: none !important; }
}
@media (min-width: 820px) and (max-width: 1023px) { .mrev-hide-tablet { display: none !important; } }
@media (min-width: 1024px) { .mrev-hide-desktop { display: none !important; } }


/*
 * MREV tablet offset bridge. Flatsome's native responsive controls switch at
 * 849/850, so a tablet value edited in UX Builder does not govern 850–1023px.
 * Apply this class only to the Column that needs an independent 820–1023 offset.
 */
@media (min-width: 820px) and (max-width: 1023px) {
  .mrev-tablet-offset > .col-inner,
  .col.mrev-tablet-offset > .col-inner {
    margin-top: var(--mrev-tablet-column-margin-top, 0px) !important;
  }
}