.card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  height: 100%;
  display: flex;
  flex-direction: column;

  h3 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
  }

  .icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    flex: 1;

    a {
      position: relative;
      display: flex;

      img {
        width: 40px;
        height: 40px;
        object-fit: contain;
        filter: grayscale(100%) brightness(0.8);
        transition:
          filter var(--duration-fast) var(--ease-standard),
          transform var(--duration-fast) var(--ease-standard);
      }
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .card .icons a:hover img {
    filter: none;
    transform: scale(1.1);
  }
}