Break Out Content and Featured Slot go off-screen in `rvt-container-xl`

[jameswilson]

Describe the bug

The edges of the Featured Slot and Break-out Content go off-screen and cause horizontal scrollbars in some browsers at viewport sizes between 1380 and 1460 pixels (i.e., 86.25em and 91.25em) when placed inside rvt-container-xl region. The problem also affects One-Column (aka Single), and Two-column (aka Details) layouts that use the XL container.

Expected behavior

The negative margins on Featured Slot and Break-out Content should never send their respective content ares off-screen or cause horizontal scrollbars

Relevant context (required)

Codepen demonstrating the issue: https://codepen.io/jameswilson/full/NWVgWrP (You must size your browse window appropriately to see the bug).

Steps to reproduce

1. Go to https://rivet.iu.edu/layouts/details-page/
2. Click "Edit on Codepen" dropbutton, then open each of the two layouts (one and two column) in new Codepens.
3. Find the rvt-container- class and change it to rvt-container-xl.
4. Resize your browser window to the aforementioned dimensions to see the bug.

[jameswilson]

The following snippet fixes the problem, but is admittedly not very elegant.

/* Fix break-out margins for Rivet Container XL. */
/* @todo remove when https://github.com/indiana-university/rivet-source/issues/755 lands */
@media screen and (min-width: 78.75em) {
  .rvt-container-xl .rvt-layout__feature-slot,
  .rvt-container-xl .rvt-layout__break-out {
    margin-right: -1.5rem;
  }

  .rvt-container-xl .rvt-layout__break-out {
    margin-left: -4rem;
  }

  .rvt-container-xl.rvt-layout__wrapper--single .rvt-layout__break-out {
    margin-left: -1.5rem;
  }
}

@media screen and (min-width: 86.25em) {
  .rvt-container-xl .rvt-layout__feature-slot,
  .rvt-container-xl .rvt-layout__break-out {
    margin-right: calc((50vw - (86.25em - 3rem) / 2) * -1);
  }

  .rvt-container-xl .rvt-layout__break-out {
    margin-left: -4rem;
  }

  .rvt-container-xl.rvt-layout__wrapper--single .rvt-layout__break-out {
    margin-left: calc((50vw - (86.25em - 3rem) / 2) * -1);
  }
}

@media screen and (min-width: 91.25em) {
  .rvt-container-xl .rvt-layout__feature-slot,
  .rvt-container-xl .rvt-layout__break-out {
    margin-right: -4rem;
  }

  .rvt-container-xl .rvt-layout__break-out,
  .rvt-container-xl.rvt-layout__wrapper--single .rvt-layout__break-out{
    margin-left: -4rem;
  }
}

Codepen with the fix: https://codepen.io/jameswilson/pen/KKLqwXo

IMO, the entire negative margin code should be refactored to make the defaults be based on the container size and dialed in at various media queries for screen widths, and after that is settled, then add in the special case logic for .rvt-layout__wrapper--details instead of the inverse, whereby it currently works with the special case logic for .rvt-layout__wrapper--single.