/* Showcase index */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 20px;
  margin-top: clamp(32px, 6vw, 60px);
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 26px 26px 22px;
  border-radius: 28px;
  text-decoration: none;
}
a.card {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 var(--hi), inset 0 -1px 0 var(--lo-in),
    0 2px 3px var(--drop-near), 0 26px 40px -20px var(--drop-far);
}
a.card:active {
  transform: translateY(0);
}

.card-glyph {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 26px;
  border-radius: 17px;
  font-size: 21px;
  color: var(--ink-2);
  transition: color 0.4s var(--ease);
}
a.card:hover .card-glyph {
  color: var(--ink);
}

.card-title {
  margin-top: 8px;
  font-size: 32px;
  font-weight: 100;
  line-height: 1.15;
  letter-spacing: 0.008em;
}
.card-summary {
  margin-top: 10px;
  font-size: 15.5px;
  font-weight: 200;
  color: var(--ink-2);
  text-wrap: pretty;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
}
.card-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

.card-cta {
  --ring: 1.5px;
  padding: 9px 16px 9px 20px;
  border-radius: 999px;
}
.card-cta .glyph {
  transition: transform 0.4s var(--spring);
}
a.card:hover .card-cta .glyph {
  transform: translateX(3px);
}

.card.ghost {
  justify-content: flex-end;
  color: var(--ink-3);
}
.card.ghost .card-summary {
  color: var(--ink-3);
}