/* glare-hover.css */
.glare-hover {
  width: var(--gh-width);
  height: var(--gh-height);
  background: var(--gh-bg);
  border-radius: var(--gh-br);
  border: 1px solid var(--gh-border);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}
.glare-hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--gh-angle),
    hsla(0, 0%, 0%, 0) 60%,
    var(--gh-rgba) 70%,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 0) 100%
  );
  transition: var(--gh-duration) ease;
  background-size:
    var(--gh-size) var(--gh-size),
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    -100% -100%,
    0 0;
}
.glare-hover:hover {
  cursor: pointer;
}
.glare-hover:hover::before {
  background-position:
    100% 100%,
    0 0;
}
.glare-hover--play-once::before {
  transition: none;
}
.glare-hover--play-once:hover::before {
  transition: var(--gh-duration) ease;
  background-position:
    100% 100%,
    0 0;
}

/* Your .pro cards use margin-left percentages on their inner <h3>/<div> text
   to position content (left-aligned, not centered) - the component's default
   `display: grid; place-items: center;` would break that layout, so we
   override it back to block flow specifically for your .pro cards. */
.pro.glare-hover {
  display: block;
  transition: transform 0.3s ease;
}
.pro.glare-hover:hover {
  transform: scale(1.05);
}