:root{
  --grid-gap:1rem;
  --grid-container-max-width:100%;
}
@media screen and (min-width:360px){
  :root{
    --grid-container-max-width:360px;
  }
}
@media screen and (min-width:425px){
  :root{
    --grid-container-max-width:425px;
  }
}
@media screen and (min-width:576px){
  :root{
    --grid-container-max-width:576px;
  }
}
@media screen and (min-width:768px){
  :root{
    --grid-container-max-width:768px;
  }
}
@media screen and (min-width:992px){
  :root{
    --grid-container-max-width:992px;
  }
}
@media screen and (min-width:1200px){
  :root{
    --grid-container-max-width:1200px;
  }
}
@media screen and (min-width:1400px){
  :root{
    --grid-container-max-width:1400px;
  }
}

.dialog-off-canvas-main-canvas{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:100vh;
}

.wrapper{
  display:grid;
  grid-template-areas:"header" "content" "footer";
  grid-template-columns:100%;
  grid-template-rows:auto 1fr auto;
  min-height:100vh;
}

.documents,.wrapper__content{
  margin:0 auto;
  max-width:var(--grid-container-max-width);
  padding:0 .5rem;
}
@media screen and (min-width:576px){
  .documents,.wrapper__content{
    padding:0 1rem;
  }
}
@media screen and (min-width:1400px){
  .documents,.wrapper__content{
    padding:0;
  }
}

.wrapper__content-narrow{
  max-width:1004px !important;
}

.documents__item{
  -moz-column-gap:.5rem;
       column-gap:.5rem;
  display:flex;
  margin-bottom:.5rem;
}

.documents__icon{
  width:20px;
}