.upp-card {
  height: 100%;
}
.upp-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.upp-card__link:focus-visible {
  outline: 2px solid var(--wu-accent);
  outline-offset: 6px;
  border-radius: 12px;
}
.upp-card__frame {
  transition: transform 0.3s var(--wu-ease), box-shadow 0.3s var(--wu-ease);
}
.upp-card__link:hover .upp-card__frame {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(22, 20, 31, 0.05), 0 24px 48px -12px rgba(22, 20, 31, 0.24);
}
.upp-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upp-card__body {
  padding-top: 20px;
}
.upp-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.upp-card__link:hover .upp-card__title {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--wu-accent);
}
.upp-card__excerpt {
  max-width: 52ch;
  margin: 6px 0 0;
  color: var(--wu-muted);
}
.upp-card__media {
  margin: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--wu-radius) var(--wu-radius) 0 0;
}

.upp-card:not(.upp-card--framed) {
  border-radius: var(--wu-radius);
  background: var(--wu-ground);
  transition: transform 0.2s var(--wu-ease), box-shadow 0.2s var(--wu-ease);
}
.upp-card:not(.upp-card--framed):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--wu-text) 12%, transparent);
}
.upp-card:not(.upp-card--framed) .upp-card__body {
  padding: var(--wp--preset--spacing--m);
}