.projects-container {
    max-width: 1240px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.projects-container > header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.project-card {
    background: var(--card-bg);
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-large) var(--shape-small) var(--shape-large) var(--shape-large);
    padding: 0.75rem 0.75rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s var(--expressive-ease), border-radius 0.3s var(--expressive-ease), background-color 0.3s ease;
}

.project-card-wrapper:nth-child(3n + 2) .project-card {
    background: var(--violet-container);
    border-radius: var(--shape-small) var(--shape-large) var(--shape-large) var(--shape-large);
}

.project-card-wrapper:nth-child(3n + 3) .project-card {
    background: var(--coral-container);
    border-radius: var(--shape-large) var(--shape-large) var(--shape-small) var(--shape-large);
}

.project-card:hover {
    transform: translateY(-7px);
    border-radius: var(--shape-small) var(--shape-large) var(--shape-large) var(--shape-large);
}

.project-image-link {
    display: block;
    overflow: hidden;
    border-radius: calc(var(--shape-large) - 6px) calc(var(--shape-small) - 2px) var(--shape-medium) var(--shape-medium);
}

.project-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: inherit;
    margin-bottom: 0;
    transition: transform 0.45s var(--expressive-ease);
}

.project-card:hover img {
    transform: scale(1.035);
}

.project-title {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: 760;
    font-variation-settings: 'opsz' 32, 'slnt' -4, 'wdth' 108, 'wght' 760;
    letter-spacing: 0;
    color: var(--text-color);
    margin: 1.35rem 1.25rem 0.8rem;
}

.project-description {
    color: var(--secondary-color);
    font-size: 1rem;
    margin: 0 1.25rem 1.5rem;
    flex-grow: 1;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 1.25rem 1.5rem;
}

.tech-tag {
    font-family: var(--code-font);
    font-size: 0.875rem;
    background: var(--surface-highest);
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    color: var(--accent-color);
    border: 1px solid var(--outline-variant);
}

.project-links {
    display: flex;
    gap: 1rem;
    margin: auto 1.25rem 0;
}

.project-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0.8rem;
    color: var(--accent-on-container);
    background: var(--accent-container);
    border-radius: 50%;
    font-weight: 700;
    transition: transform 0.25s var(--expressive-ease);
}

.project-link:hover {
    color: var(--accent-on-container);
    transform: translateY(-2px) rotate(-5deg);
    border-radius: 35% 55% 40% 50%;
}

.project-link svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.google-play-icon {
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: url('/static/portfolio/google-play-icon.png') center / contain no-repeat;
    mask: url('/static/portfolio/google-play-icon.png') center / contain no-repeat;
}

/* .project-filter-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-button {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    cursor: pointer;
    font-family: var(--body-font);
    transition: all 0.3s ease;
}

.filter-button:hover,
.filter-button.active-filter {
    background: var(--accent-color);
    color: var(--bg-color);
} */

/* Responsive Design */
@media (max-width: 1181px) {
    .projects-container > header {
        align-items: center;
        text-align: center;
    }

    .projects-container > header .container-header {
        text-align: center;
    }

    .project-card img {
        height: 190px;
    }
}

@media (max-width: 991px) {
    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-image-link {
        display: none;
    }

    .project-title {
        margin-top: 0.75rem;
    }
}