.phd-card-grid {
  --phd-card-grid-columns: 3;
  --phd-card-grid-gap: var(--phd-space-5);

  --phd-card-background: var(--phd-white);
  --phd-card-radius: var(--phd-border-radius-l);
  --phd-card-shadow: 0 1em 2em -1em transparent;
  --phd-card-shadow-hover: 0 1.5em 2em -1.5em oklch(0 0 0 / .1);
  --phd-card-outline-color: var(--phd-mint-300);
  --phd-card-outline-color-hover: var(--phd-mint-600);
  --phd-card-padding: var(--phd-space-2);
  --phd-card-gap: var(--phd-space-4);

  --phd-card-content-gap: .75rem;
  --phd-card-content-padding: 0 .625rem .625rem;

  --phd-card-cta-gap: .25em;
  --phd-card-cta-justify: end;
  --phd-card-cta-padding-top: 1.75rem;
  --phd-card-cta-font-size: var(--phd-font-size-5);
  --phd-card-cta-font-weight: 500;
  --phd-card-cta-letter-spacing: -.025em;
  --phd-card-cta-color: var(--phd-mint-600);
  --phd-card-cta-icon-size: 1em;

  --phd-card-focus-ring: var(--phd-mint-600);

  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--phd-card-grid-gap);

  @media (max-width: 1024px) {
    --phd-card-grid-columns: 2;
  }

  @media (max-width: 767px) {
    --phd-card-grid-columns: 1;
    --phd-card-grid-gap: var(--phd-space-4);
  }
}

.phd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--phd-card-background);
  border-radius: var(--phd-card-radius);
  box-shadow: var(--phd-card-shadow);
  outline: 1px solid var(--phd-card-outline-color);
  padding: var(--phd-card-padding);
  gap: var(--phd-card-gap);
  flex-basis: calc(
    (100% - (var(--phd-card-grid-gap) * (var(--phd-card-grid-columns) - 1)))
    / var(--phd-card-grid-columns)
  );
  transition: box-shadow .3s ease, outline-color .3s ease;
}

.phd-card:not(.phd-card--static):hover {
  box-shadow: var(--phd-card-shadow-hover);
  outline-color: var(--phd-card-outline-color-hover);
}

.phd-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--phd-card-content-gap);
  padding: var(--phd-card-content-padding);
}

.phd-card__cta {
  display: flex;
  align-items: center;
  justify-content: var(--phd-card-cta-justify);
  gap: var(--phd-card-cta-gap);
  font-size: var(--phd-card-cta-font-size);
  font-weight: var(--phd-card-cta-font-weight);
  letter-spacing: var(--phd-card-cta-letter-spacing);
  color: var(--phd-card-cta-color);
  margin-top: auto;
  padding-top: var(--phd-card-cta-padding-top);
}

.phd-card__cta svg {
  width: var(--phd-card-cta-icon-size);
  height: var(--phd-card-cta-icon-size);
}

.phd-card__link {
  position: absolute;
  inset: 0;
}

button.phd-card__link {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.phd-card__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--phd-card-focus-ring);
  outline-offset: 2px;
}