@layer components {
  .cards { gap: 2.625rem; }

  .guide-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: clamp(2rem, 4vw, 2.75rem);
    border-radius: var(--pw-r-lg);
    background: var(--pw-card-flat);
    transition: transform .2s;

    &:hover { transform: translateY(-.125rem); }
    & h3 { margin: .35rem 0 .4rem; font-size: var(--pw-fs-h3); }
    & p { max-width: none; margin-block-end: .75rem; color: var(--pw-fg-subtle); font-size: var(--pw-fs-base); font-weight: 300; line-height: 1.65; }
    & .tags { gap: .9rem; }
    & .tag { padding: 0; box-shadow: none; color: var(--pw-fg-faint); }
    &:not(.guide-card--wide) > .textlink { margin-block-start: auto; }
    &.guide-card--wide { gap: 2rem; }
  }

  .guide-card__body { display: flex; flex-direction: column; gap: .7rem; }
  .guide-card__wide-title { font-size: var(--pw-fs-lg); }

  @container (min-width: 52rem) {
    .guide-card--wide { flex-direction: row; align-items: center; justify-content: space-between; }
  }
}