@media (hover: hover) {
  .c-card-ascend-hover {
    position: relative;
  }
  .c-card-ascend-hover:before {
    background-image: linear-gradient(269deg, #e0f4f5, #e5f3f9 24%, #bac2ea 58%, #d0b4e5 97%);
    content: "";
    height: 100%;
    left: 0;
    -webkit-mask-image: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0.34) 22%, hsla(0, 0%, 100%, 0) 61%);
    mask-image: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0.34) 22%, hsla(0, 0%, 100%, 0) 61%);
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.3s;
    width: 100%;
    z-index: 0;
  }
  .c-card-ascend-hover > * {
    position: relative;
    z-index: 1;
  }
  .c-card-ascend-hover:hover:before {
    opacity: 1;
  }
}
.c-card-ascend-xl-radius {
  --card-radius: 24px;
  --card-cover-radius: 24px;
}
@media (min-width: 1201px) and (max-width: 1680px) {
  .c-card-ascend-xl-radius {
    --card-radius: 20px;
    --card-cover-radius: 12px;
  }
}
@media (min-width: 841px) and (max-width: 1200px) {
  .c-card-ascend-xl-radius {
    --card-radius: 16px;
    --card-cover-radius: 8px;
  }
}
@media (max-width: 840px) {
  .c-card-ascend-xl-radius {
    --card-radius: 8px;
    --card-cover-radius: 4px;
  }
}