.projects-page {
    padding: 140px 0 80px;
}

.projects-subtitle {
    color: var(--text-secondary);
    max-width: 700px;
    margin: auto;
    margin-top: 20px;
}

.projects-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(280px, 1fr));

    gap: 30px;

    margin-top: 60px;
}

.project-card {

    background: var(--bg-card);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: var(--radius-lg);

    overflow: hidden;

    transition: var(--transition);
}

.project-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);
}

.project-image {

    height: 180px;

    overflow: hidden;
}

.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;
}

.project-card:hover img {

    transform: scale(1.05);
}

.project-content {

    padding: 24px;
}

.project-content h3 {

    margin-bottom: 10px;

    font-size: 20px;
}

.project-content p {

    color: var(--text-secondary);

    font-size: 14px;

    margin-bottom: 16px;
}

.project-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.project-tags span {

    font-size: 11px;

    padding: 5px 10px;

    border-radius: 20px;

    background:
        rgba(99,102,241,.1);

    border:
        1px solid rgba(99,102,241,.2);

    color: var(--primary-light);
}

.project-link {

    display: inline-block;

    margin-top: 20px;

    color: var(--primary-light);

    text-decoration: none;
}

.hide {
    display: none;
}