.mask-to-top-dark {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-top-dark {
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
  }
}
.mask-to-top-dimmer {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-top-dimmer {
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
  }
}
.mask-to-top-dim {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-top-dim {
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
  }
}
.mask-to-top-clear {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-top-clear {
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
  }
}
.mask-to-right-dark {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-right-dark {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
  }
}
.mask-to-right-dimmer {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-right-dimmer {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
  }
}
.mask-to-right-dim {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-right-dim {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
  }
}
.mask-to-right-clear {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-right-clear {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
  }
}
.mask-to-bottom-dark {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-bottom-dark {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
  }
}
.mask-to-bottom-dimmer {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-bottom-dimmer {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
  }
}
.mask-to-bottom-dim {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-bottom-dim {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
  }
}
.mask-to-bottom-clear {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-bottom-clear {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
  }
}
.mask-to-left-dark {
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-left-dark {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) 50%);
  }
}
.mask-to-left-dimmer {
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-left-dimmer {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
  }
}
.mask-to-left-dim {
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-left-dim {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%);
  }
}
.mask-to-left-clear {
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
}

@media (max-width: 61.24em) {
  .sm-mask-to-left-clear {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(0, 0, 0) 50%);
  }
}