/* Component styles: custom properties, flexbox, a fluid font size,
   a keyframe animation, and a media query. */
:root {
  --brand: #059669;
  --ink: #18181b;
  --radius: 8px;
  --gap: 1rem;
}

* {
  box-sizing: border-box;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--radius);
}

.card__title {
  margin: 0;
  color: var(--brand);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.button {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: white;
  cursor: pointer;
  animation: fade-in 200ms ease-out;
}

.button:hover {
  filter: brightness(1.05);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .card {
    padding: 0.5rem;
  }
}