/* components/cards.css */

.app-cards {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-8);
  margin-bottom: calc(var(--space-8) + var(--space-4));

  --border-width: 2px;
  --icon-height: 96px;
}

.app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  text-decoration: none;
  color: var(--color-text);
  width: 260px;
  transition: box-shadow .2s, transform .2s;
}

.app-card:hover {
  box-shadow: 0 8px 32px var(--color-brand-dim);
  transform: translateY(-4px) scale(1.03);
}

.app-card img {
  height: var(--icon-height);
  margin-bottom: var(--space-4);
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color: white;
}

.app-card-wide {
  width: 50%;
  max-width: var(--container-max);
  align-items: flex-start;
  text-align: left;
}

.app-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--color-brand);
  text-align: center;
  width: 100%;
}

.app-desc {
  font-size: 1rem;
  color: var(--color-muted);
  text-align: center;
}

.internal-img {
  border: solid;
  border-width: var(--border-width);
  border-color: var(--brand-red-500);
}

.internal-img-margin {
  height: calc(var(--icon-height) + 2 * var(--border-width)) !important;
  width: calc(var(--icon-height) + 2 * var(--border-width)) !important;
}

.external-img {
  border: solid;
  border-width: var(--border-width);
  border-color: steelblue;
}