.post-template-card {
  /* animation settings */
  --card-transition-duration: 180ms;
  --card-transition-easing: ease;

  /* color and background settings */
  --card-bg: var(--theme-surface, var(--wp--preset--color--primary));
  --card-hover-bg: var(--theme-surface, var(--wp--preset--color--primary));

  /* border settings */
  --card-border-width: 2px;
  --card-hover-border: var(--theme-link-color);
  --card-radius: 18px;

  position: relative;
  border-radius: var(--card-radius);
  transition: background-color var(--card-transition-duration) var(--card-transition-easing);
  background-color: var(--card-bg);

  gap: 15px;

  &:has(.wp-block-post-title a:hover),
  &:has(.wp-block-post-title a:focus) {
    background-color: var(--card-hover-bg);
  }

  .wp-block-post-title a {
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      cursor: pointer;
      border: var(--card-border-width) solid transparent;
      border-radius: var(--card-radius);
      transition: border-color var(--card-transition-duration)
        var(--card-transition-easing);
    }

    &:hover::before,
    &:focus::before {
      border-color: var(--card-hover-border);
    }

    &:focus {
      outline: none;
    }
  }
}