/* PROJECTS */
.projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;

    .project-info {
        padding: 20px;
    }
    .project {
        background-color: var(--fourth-neutral);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);

        .project-title {
            margin-bottom: 1rem;
        }
        .project-image {
        width: 100%;
        height: auto;
        box-shadow: var(--shadow);
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        box-shadow: none;
        }

        @media (min-width: 768px) {
            .project-image {
                /* Aplica el filtro solo para pantallas que sean al menos de 768px de ancho */
                filter: brightness(60%) contrast(100%) sepia(100%) hue-rotate(180deg);
                transition: filter 1s ease;
            }
        }

        .project-image:hover {
             filter: brightness(100%) contrast(100%) sepia(0%) hue-rotate(360deg); /* Quita el filtro para revelar la imagen original */
        }

        .project-types {
            width: 100%;
            justify-content: center;
            align-items: center;
    
            .project-type {
            position: relative; /* Posiciona el elemento para el tooltip */
            cursor: help;       /* Cambia el cursor para indicar que hay información adicional */
            display: inline-block;
            max-width: fit-content;
            background-color: var(--third-neutral);
            color: var(--secundary-neutral);
            padding: 10px;
            border-radius: 60px;
            margin-bottom: 1rem;
            }
        }

        p {
            text-align: center;
            font-size: 1rem;
            margin-bottom: 1rem;
        }

        .project-tecnologies {
            width: 100%;
            justify-content: center;
            align-items: center;
    
            .project-tecnology {
            position: relative; /* Posiciona el elemento para el tooltip */
            cursor: help;       /* Cambia el cursor para indicar que hay información adicional */
            display: inline-block;
            max-width: fit-content;
            background-color: var(--accent-one);
            color: var(--third-neutral);
            padding: 10px;
            border-radius: 60px;
            margin-bottom: 1rem;
            }
        }
        
        a.project-url {
            margin-bottom: 1rem;
            text-decoration: none;
            color: var(--accent-one)
        }

        a.project-url:hover {
            color: var(--light-neutral);
        }
    }
}


@media (min-width: 820px) {
    .projects {
        grid-template-columns: repeat(2, 1fr);
    }
}