hoverしたらグラデーションが変わる。
グラデーションの変更はlinear-gradientで行っている。

  .heading {
    position: relative;
    /* width: 100%; */
    aspect-ratio: 16 / 9;
    background-color: #8ec5fc;
  }
  .heading::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
  }
  .heading::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0;
    background-image: linear-gradient(62deg, #e0c3fc 0%, #8ec5fc 100%);
    transition: opacity 1s ease-in-out;
  }
  .heading:hover::after {
    opacity: 1;
  }
  .heading text {
    position: relative;
    z-index: 3;
  }