@media screen and (min-width: 1600px) {
  html {
    --site-width: clamp(1180px, 70vw, 1640px);
    --decor-width: calc((100% - var(--site-width)) / 2);
    background-color: #141720;
  }

  .site-shell {
    max-width: var(--site-width);
  }

  html::before,
  html::after,
  body::before,
  body::after {
    content: "";
    position: fixed;
    width: var(--decor-width);
    pointer-events: none;
  }

  html::before,
  body::before {
    left: 0;
  }

  html::after,
  body::after {
    right: 0;
  }

  html::before,
  html::after {
    top: 0;
    height: 54%;
    z-index: 1;
    background: url("assets/site-marges-orcus-deva.webp") var(--decor-position) center / auto 100% no-repeat;
    mask-image: linear-gradient(black 94.45%, transparent);
  }

  html::before { --decor-position: 1%; }
  html::after { --decor-position: 98%; }

  body::before,
  body::after {
    inset-block: 51% 0;
    background: var(--decor-image) center / cover no-repeat;
  }

  body::before { --decor-image: url("assets/site-marges-portes-de-cendre.webp"); }
  body::after { --decor-image: url("assets/site-marges-sanctuaire-aube.webp"); }
}