/* Main styles */
:root {
  /* Color system */
  --color-primary: #0071e3;
  --color-secondary: #86868b;
  --color-background: #ffffff;
  --color-background-dark: #121212;
  
  /* Spacing system */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
}

/* Main image styling */
.main-image {
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-image:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Support for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .main-image:hover {
    animation: none;
    transition: none;
  }
}