.projects-section { flex: 0 0 340px; display: flex; flex-direction: column; gap: 18px; padding: 32px 24px; background: rgba(20, 20, 30, 0.10); backdrop-filter: blur(24px) saturate(140%) brightness(1.08); -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.08); border-radius: var(--border-radius-large); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255,255,255,0.10); min-width: 280px; max-width: 340px; margin-left: 20px; align-self: stretch; } .projects-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; color: var(--text-color); letter-spacing: 0.03em; background: linear-gradient(135deg, var(--secondary-color) 0%, var(--text-color) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .project { padding: 18px 16px; border-radius: var(--border-radius); box-shadow: 0 2px 12px 0 rgba(31, 38, 135, 0.10); margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; transition: transform 0.18s, box-shadow 0.18s; } .project:nth-child(odd) { background: linear-gradient(135deg, rgba(20, 30, 60, 0.75) 0%, rgba(40, 50, 120, 0.75) 100%); } .project:nth-child(even) { background: linear-gradient(135deg, rgba(10, 10, 10, 0.82) 0%, rgba(30, 30, 30, 0.82) 100%); } .project-title { font-size: 1.15rem; font-weight: 600; color: var(--text-color); margin-bottom: 2px; letter-spacing: 0.01em; background: linear-gradient(90deg, var(--text-color) 0%, var(--secondary-color) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .project-desc { font-size: 0.98rem; color: var(--text-color-light); font-weight: 400; line-height: 1.5; } @media (max-width: 900px) { .projects-section { flex: unset; max-width: 100%; margin-left: 0; margin-top: 24px; max-width: 100%; } }