.linear-left-or-bottom, .linear-right-or-bottom {
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
  mask-image: linear-gradient(180deg, #000 80%, transparent);
}

@media (min-width: 768px) {
  .linear-right-or-bottom {
    -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
    mask-image: linear-gradient(90deg, #000 60%, transparent);
  }
  .linear-left-or-bottom {
    -webkit-mask-image: linear-gradient(270deg, #000 60%, transparent);
    mask-image: linear-gradient(270deg, #000 60%, transparent);
  }
  .clip-parallelogram-left {
    -webkit-clip-path: polygon(60% 0, 0 100%, 100% 100%, 100% 0);
    clip-path: polygon(60% 0, 0 100%, 100% 100%, 100% 0);
    margin-right: -1px;
  }
  .clip-parallelogram-right {
    -webkit-clip-path: polygon(100% 0, 60% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 60% 100%, 0 100%, 0 0);
    margin-left: -1px;
  }
}