:root {
  --oxfcms-section--width: clamp(1200px, 93.5%, 1790px);
  --oxfcms-section--gap: clamp(16px, 1.5vw, 22px);
}

/* Reset the section width variable at different breakpoints */
@media (width < 1280px) {
  :root {
    --oxfcms-section--width: clamp(700px, 95%, 1200px)
  }
}
@media (width < 768px) {
 :root {
    --oxfcms-section--width: clamp(288px, 90%, 696px)
  }
}

/** Restrict width */
.oxfcms-section,
.oxfcms-layout-flexbox,
.oxfcms-layout-grid,
.is-mercury-edit-mode .paragraph--type--section {
  width: var(--oxfcms-section--width);
  margin: 0 auto;
  .oxfcms-section,
  .oxfcms-layout-flexbox,
  .oxfcms-layout-grid {
    width: 100%;
    margin: 0;
  }
  .l__main {
    gap: var(--oxfcms-section--gap);
  }
  /** Grid version */
  /** Flexbox does not currently allow any "small width" components */
  &:has(div[style*="--grid-items-per-row: 1;"] > .oxfcms-text),
  &:has(div[style*="--grid-items-per-row: 1;"] > .oxfcms-video),
  &:has(div[style*="--grid-items-per-row: 1;"] > .oxfcms-quotation),
  &:has(div[style*="--grid-items-per-row: 1;"] > .paragraph--type--oxfcms-tabs),
  &:has(
    div[style*="--grid-items-per-row: 1;"] > .paragraph--type--oxfcms-accordion
  ) {
    margin: 0 auto;
  }

  .paragraph--type--oxfcms-accordion,
  .paragraph--type--oxfcms-tabs {
    margin: clamp(1rem, 0.75rem + 0.5vw, 1.25rem) auto;
  }
}

  /** Fix flexbox widths in footer */
.oxfcms-footer .oxfcms-layout-flexbox, .oxfcms-footer .oxfcms-layout-grid {
  width: 100%;
  max-width: var(--oxfcms-section--width);
}