/* Mods Grid */ .mods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .mod-card { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); transition: all 0.3s; aspect-ratio: 32 / 27; display: flex; flex-direction: column; } .mod-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .mod-card-orange { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); } .mod-card-purple { background: linear-gradient(135deg, #fae8ff 0%, #f3e8ff 100%); } .mod-card-blue { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); } .mod-card-image { /* Remove fixed height, use aspect ratio instead */ width: 100%; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mod-icon { color: white; font-size: 5rem; animation: float 3s ease-in-out infinite; } .mod-card-content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .mod-card-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; } .mod-card-description { color: #4b5563; margin-bottom: 1rem; flex-grow: 1; } .mod-card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }