.text-gray-400 { color: #764ba2 !important; } .bg-blue-600 { --tw-bg-opacity: 1; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .image-item { transition: all 0.3s ease; } .image-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .dragging { opacity: 0.5; } .drag-over { background-color: #e0f2fe; border-color: #0284c7; } .progress-bar { transition: width 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.3s ease-out; } .image-preview { background-size: contain; background-repeat: no-repeat; background-position: center; } /* Custom grid for 5 columns */ .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Responsive adjustments */ @media (max-width: 1280px) { .grid-cols-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1024px) { .grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }