/* https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ */
@property --full-w {
  syntax: '<length>';
  initial-value: 0px;
  inherits: true;
}
html { container-type: inline-size }
body { --full-w: 100cqw }

.full-bleed-background {
  position: relative;
}
.full-bleed-background:before {
  content: '';
  margin-left: 50%;
  transform: translateX(-50%);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: inherit;
  justify-self: center;
  width: var(--full-w);
}

body.admin-expanded.admin-vertical .full-bleed-background:before {
  --admin-menu-width: 260px;
  width: calc(var(--full-w) - var(--admin-menu-width));
}