//
//Pager
//

.page {
  //page-bg
  &-bg {
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    border: 0;
    height: 50vh;
    background-position: 50% 50%;
    background-size: 0;

    &,&:before {
      background-repeat: no-repeat
    }
    &,:after {
      bottom: 0;
      position: absolute
    }
    &:before {
      background-size: cover;
      background-image: inherit;
      background-position: inherit;
      position: absolute;
      height: 100%;
      opacity: .1;

      .black &,.dark &, .grey & {
        opacity: .15;
      }
    }

    &:after {
      height: 50%;
      background-image: linear-gradient(to bottom,rgba(255,255,255,0),#fff);
      background-repeat: repeat-x;

      .light &,.grey &,.dark &,.black & {
        background-image: linear-gradient(to bottom,transparent,#16202f);
      }
    }
  }

  //page-content
  &-content {
    position: relative;
    z-index: 10;
  }
}


.cover:after,.page-bg:after,.page-bg:before {
  width: 100%;
  content: ''
}