@media (min-width: 768px) {
  .faded {
    position: relative;
    display: inline-block;
    color: #e1e1e1;
  }
  .faded:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-collapse: separate;
  }
  .faded.faded-bottom:after {
    box-shadow: inset 0 -100px 40px -1px;
  }
  .faded.faded-top:after {
    box-shadow: inset 0 -100px 40px -1px;
  }
  .faded.faded-narrow.faded-bottom:after {
    box-shadow: inset 0 -20px 20px -10px;
  }
  .faded.faded-narrow.faded-top:after {
    box-shadow: inset 0 -20px 20px -10px;
  }
  .faded.faded-wide.faded-bottom:after {
    box-shadow: inset 0 -80px 80px -28px;
  }
  .faded.faded-wide.faded-top:after {
    box-shadow: inset 0 -80px 80px -28px;
  }
  .panel {
    background-color: blue;
    padding: 1em;
    color: #e1e1e1;
  }
  .panel .faded {
    color: #e1e1e1;
  }
}