.space{
    padding-top: 50px;
}

.portafolio{
    width: 100%;
    margin-bottom: 50px;
    padding: 40px 12px;
    h1{
        text-align: center;
        margin-bottom: 28px;
    }
    .content-portafolio{
        margin: 0 auto;
        max-width: 1200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
        article{
            width: 380px;
            height: 346px;
            cursor: pointer;
            .card-article-portafolio{
                width: 380px;
                height: 346px;
                z-index: 3;
                position: relative;
                overflow: hidden;
                border-radius: 12px;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--dark);
                opacity: 0;
                transition: opacity 0.3s, transform 0.4s;
                z-index: 1;
                }
                .text-card-portafolio{
                   position: absolute; 
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 250px;
                    text-align: center;
                    color: white;
                    z-index: 2;
                    visibility: hidden;
                    opacity: 0;
                    transition: opacity 0.3s ease 0.2s;
                    line-height: 20px;
                    font-family: 'Roboto';
                    h3{
                        line-height: 24px;
                        margin-bottom: 10px;
                    }
                    p{
                        font-size: 14px;
                    }
                    .btn-ver-sitio{
                        margin-top: 28px;
                        padding: 8px 16px;
                        border: 2px solid white ;
                        width: 150px;
                        margin-left: auto;
                        margin-right: auto;
                    }
                }

                
                &:hover {
                    &::before {
                        opacity: 1;
                        transform: scale(1);
                    }
                    .text-card-portafolio {
                        visibility: visible;
                        opacity: 1;
                    }
                }


            }
        }
    }
}

@media (max-width: 1199px){
    .portafolio{
        padding: 40px 12px;
        .content-portafolio{
            margin: 0 auto;
            max-width: 1200px;
            display: flex;
            gap: 24px;
            article{
                width: 370px;
                height: 336px;
                cursor: pointer;
                .card-article-portafolio{
                    width: 370px;
                    height: 336px;
                    z-index: 3;
                    position: relative;
                    overflow: hidden;
                    border-radius: 12px;
                    
            }
        }
    }
}

}

@media (max-width: 400px){
    .portafolio .content-portafolio article{
        width: 100%;
        height: auto;
        cursor: pointer;
        .card-article-portafolio{
            width: 100%;
        height: auto;
            z-index: 3;
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            img{
                width: 100%;
        height: auto;
            }
            
    }
}
}