/* ===========================================================
   CSS Components Library
   =========================================================== */

/* Import CSS Variables */
@import url('./variables.css');

/* ===========================================================
   CARD COMPONENTS
   =========================================================== */

.card {
  background-color: var(--color-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card__header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-200);
}

.card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.card__content {
  padding: var(--spacing-lg);
}

.card__footer {
  padding: var(--spacing-lg);
  background-color: var(--color-gray-100);
  border-top: 1px solid var(--color-gray-200);
}

/* ===========================================================
   HOBBY CARD COMPONENTS
   =========================================================== */

/* ===========================================================
   TIMELINE COMPONENTS
   =========================================================== */

/* ===========================================================
   DIVIDER COMPONENTS
   =========================================================== */

/* ===========================================================
   SECTION COMPONENTS
   =========================================================== */

/* ===========================================================
   HEADER COMPONENTS
   =========================================================== */

/* ===========================================================
   RESPONSIVE COMPONENTS
   =========================================================== */

/* ===========================================================
   RESPONSIVE COMPONENTS
   =========================================================== */

/* Mobile-first responsive components */
@media (min-width: 768px) {
  /* Add responsive styles here if needed */
}