section#mat {
  .mat-card {
    position: absolute;
    --card-height: 100px;
    width: auto !important;
    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));
      transition: 0.2s scale;
      cursor: pointer;
      &:hover {
      }
      .card-cover,
      .card-back {
        width: 100% !important;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      .card-cover {
        z-index: 1;
        transform: translateZ(0.5px);
      }
      &.focus .card-cover {
        animation: focus 0.6s ease-in-out;
      }
      .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);
    }
    .card-focus {
      position: absolute;
      width: calc(100% * var(--focus-scale));
      height: calc(100% * var(--focus-scale));
      left: calc((var(--focus-scale) - 1) * -50%);
      top: calc((var(--focus-scale) - 1) * -50%);
      outline: 3px solid #ddd;
      filter: blur(calc(2px * 1.3 * var(--focus-scale)));
      display: var(--focus-display);
      opacity: var(--focus-opacity);
    }
  }
}

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

@keyframes focus {
  0% {
    filter: brightness(1) contrast(1);
  }
  50% {
    filter: brightness(1.5) contrast(1.1);
  }
  100% {
    filter: brightness(1) contrast(1);
  }
}

.card-dropdown {
  .ant-dropdown-menu {
    background-color: #333;
  }
}
