.progetti {
    width: calc(100% - 20px);
    max-width: 1300px;
    height: auto;

    display: flex;
    row-gap: 50px;
    column-gap: 50px;
    flex-wrap: wrap;

    margin: 100px auto;
}

    .progetto {
        width: 100%;
        width: 400px;
        height: 270px;

        display: block;

        margin: auto;

        overflow-y: hidden;

        border-radius: 25px;

        box-shadow: 0px 0px 20px 0px rgba(65, 65, 67, 0.55);
    }

        .poster-client {
            width: 400px;
            height: 270px;
    
            margin: auto;

            background-repeat: no-repeat;
            background-size:cover;
            background-position-x: 45%;

            border-radius: 25px;
        }

        .information-client {
            width: 100%;
            max-width: 400px;
            height: 270px;
    
            display: block;
            position: relative;
    
            margin: auto;
            padding-top: 30px;

            border-radius: 25px;

            z-index: 2;

            transition: margin-top 20s ease;

            background-color: rgba(65, 65, 67, 0.80);
        }

        .progetto:hover > .information-client {
            margin-top: -270px;
        }

            .name-client,
            .type-progetto {
                width: calc(100% - 10px);
                height: fit-content;

                margin: auto;

                text-align: center;

                color: var(--white);
            }

            .type-progetto {
                margin-top: 15px;
            }

            .description-client {
                width: 100%;
                height: auto;

                display: flex;
                justify-content: center;
                align-items: center;

                margin: 25px auto auto auto;

                background-color: rgba(151, 85, 215, 0.85);
            }

                .content-description-client {
                    width: calc(100% - 20px);
                    height: fit-content;
    
                    margin: auto;
                    padding: 15px 0px;
    
                    text-align: center;
    
                    color: var(--white);
                }
                
@media (max-width: 420px) {
    .progetti {
        max-width: 300px;
        
        row-gap: 40px;
    }
    
        .progetto {
            width: 300px;
            height: 202px;
        }
    
            .poster-client {
                width: 300px;
                height: 202px;
            }
    
            .information-client {
                max-width: 300px;
                height: 202px;
                
                padding-top: 15px;
            }
    
            .progetto:hover > .information-client {
                margin-top: -202px;
            }
    
                .type-progetto {
                    margin-top: 15px;
                }
    
                .description-client {
                    margin: 10px auto auto auto;
                }
    
                    .content-description-client {
                        padding: 10px 0px;
                    }
}

@media (max-width: 320px) {
        .progetti {
        max-width: 222px;
        
        row-gap: 30px;
    }

    .progetto {
        width: 222px;
        height: 150px;
    }

        .poster-client {
            width: 222px;
            height: 150px;
        }

        .information-client {
            width: 222px;
            height: 150px;
            
            padding-top: 10px;
        }

        .progetto:hover > .information-client {
            margin-top: -150px;
        }

            .type-progetto {
                margin-top: 10px;
            }

            .description-client {
                margin: 5px auto auto auto;
            }

                .content-description-client {
                    padding: 5px 0px;
                }
}