section#mat {
  .mat-card {
    position: absolute;
    // left: 50%;
    // top: 50%;
    --card-height: 100px;
    height: var(--card-height);
    aspect-ratio: var(--card-ratio);
    transform-style: preserve-3d;
    .card-img-wrap {
      transform-style: preserve-3d;
      position: relative;
      height: 100%;
      width: 100%;
      transform: translateZ(calc(var(--z) * 1px + 0.1px))
        rotateY(calc(var(--ry) * 1deg));
      .card-cover,
      .card-back {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      .card-cover {
        z-index: 1;
        transform: translateZ(0.5px);
      }
      .card-back {
        z-index: 0;
        transform: translateZ(0px);
      }
    }
    .card-shadow {
      // position: absolute;
      // left: 0;
      // top: 0;
      // width: 100%;
      // height: 100%;
      // background-color: #0000005e;
      // filter: blur(2px);
    }
  }
}

.highlight {
  box-shadow: 0 0 10px 2px #5db7ff;
}
