/* Columns created with plg_system_tinycolumns */
.mb-columns {
  display: grid;
  grid-template-columns: repeat(var(--mb-cols, 1), minmax(0, 1fr));
  gap: var(--mb-gap, 1.5rem);
  margin-bottom: 1rem;
}
.mb-column { min-width: 0; }
.mb-column > :first-child { margin-top: 0; }
.mb-column > :last-child { margin-bottom: 0; }
.mb-cols-1 { --mb-cols: 1; }
.mb-cols-2 { --mb-cols: 2; }
.mb-cols-3 { --mb-cols: 3; }
.mb-cols-4 { --mb-cols: 4; }
.mb-cols-5 { --mb-cols: 5; }
.mb-cols-6 { --mb-cols: 6; }
.mb-columns.mb-layout-33-67 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.mb-columns.mb-layout-67-33 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mb-columns.mb-layout-25-75 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.mb-columns.mb-layout-75-25 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.mb-columns.mb-layout-25-50-25 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.mb-columns.mb-layout-50-25-25 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.mb-columns.mb-layout-25-25-50 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.mb-gap-none { --mb-gap: 0; }
.mb-gap-small { --mb-gap: .75rem; }
.mb-gap-medium { --mb-gap: 1.5rem; }
.mb-gap-large { --mb-gap: 4.5rem; }
/* Medium gap: larger when there are only two columns */
.mb-cols-2.mb-gap-medium { --mb-gap: 3rem; }

/* Stack columns on narrow screens */
@media (max-width: 575.98px) {
  .mb-columns.mb-stack-small { grid-template-columns: minmax(0, 1fr) !important; row-gap: min(var(--mb-gap), 1.5rem); }
}
@media (max-width: 767.98px) {
  .mb-columns.mb-stack-medium { grid-template-columns: minmax(0, 1fr) !important; row-gap: min(var(--mb-gap), 1.5rem); }
}
@media (max-width: 991.98px) {
  .mb-columns.mb-stack-large { grid-template-columns: minmax(0, 1fr) !important; row-gap: min(var(--mb-gap), 1.5rem); }
}

/* Images and videos fit the column width */
.mb-column img,
.mb-column video { max-width: 100%; height: auto; }
.mb-column figure { max-width: 100%; }

/* Boxes (div with a class) inside columns: no extra space at top/bottom */
.mb-column div[class]:not(.mb-columns) > :first-child { margin-top: 0; }
.mb-column div[class]:not(.mb-columns) > :last-child { margin-bottom: 0; }
.mb-column > div[class]:not(.mb-columns) { margin-bottom: 1rem; }
.mb-column > div[class]:not(.mb-columns):last-child { margin-bottom: 0; }

/* Two column rows one after another: same space between rows as between columns */
.mb-columns + .mb-columns { margin-top: calc(var(--mb-gap, 3rem) - 1rem); }