.hidden {
  display: none !important; // make sure to overwrite possible inline styling (set by JS)
}

@include viewport--l {
  .hidden--from-l {
    display: none !important; // make sure to overwrite possible inline styling (set by JS)
  }
}

@include viewport--l('inversed') {
  .hidden--until-l {
    display: none !important; // make sure to overwrite possible inline styling (set by JS)
  }
}

// hide visually for accessibility purposes
.hidden--visually,
%hidden--visually {
  height: 1px;
  left: -1000%;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}