:root {
  --background-color: var(--background-color-contrast);
}

.l-boxed {
  display: grid;
  grid-template-areas: "header" "content" "footer";
  background-color: var(--background-color);
}
@media screen and (min-width: 992px) {
  .l-boxed {
    grid-template-areas: "header  header  header" "sidebar content content" "footer footer footer";
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 740px) {
  .l-boxed .c-brand__network {
    fill: #0d0d0d;
  }
}
@media screen and (min-width: 992px) {
  .l-boxed .c-brand__network {
    fill: #fff;
  }
}
@media screen and (min-width: 740px) {
  .l-boxed .c-brand {
    fill: #fff;
  }
}
.l-boxed .c-brand__edition {
  fill: #fff;
}
@media screen and (min-width: 992px) {
  .l-boxed .c-brand__edition {
    fill: var(--theme-color);
  }
}
.l-boxed__header {
  grid-area: header;
  background-color: var(--theme-color);
}
@media screen and (min-width: 992px) {
  .l-boxed__header {
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
  }
}
.l-boxed__sidebar {
  display: none;
  grid-area: sidebar;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .l-boxed__sidebar {
    display: block;
    height: 100vh;
  }
  .l-boxed__sidebar:before {
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    left: 0px;
    grid-area: sidebar;
    content: "";
    background: rgba(0, 0, 0, 0.6);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 2;
    width: 33.3%;
  }
}
.l-boxed__content {
  position: relative;
  grid-area: content;
}
@media screen and (min-width: 992px) {
  .l-boxed__content {
    height: 100vh;
    overflow-y: auto;
  }
}
@media screen and (min-width: 992px) {
  .l-boxed__inner {
    max-width: 50vw;
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 992px) {
  .l-boxed__inner {
    margin-top: 15vh;
  }
}
@media screen and (min-width: 1280px) {
  .l-boxed__inner {
    max-width: 37vw;
  }
}
.l-boxed__footer {
  grid-area: footer;
  text-align: center;
}
@media screen and (min-width: 992px) {
  .l-boxed__footer {
    position: fixed;
    bottom: 0;
    left: 0;
    color: #fff;
    text-align: left;
    width: 33.3%;
  }
}
.l-boxed__footer .c-footer-brand {
  color: var(--icon-color);
}
@media screen and (min-width: 992px) {
  .l-boxed__footer .c-footer-brand {
    color: #fff;
  }
}