#content-container{
    height: 400px;
}

.row{
    display: flex;
    height: 50%;
}

.content{
    background-color: #fff;
    width: 90%;
    margin: 30px;
    transition: 500ms;
    overflow-y: scroll;
    overflow-x: hidden;
    color: white; 
    background-repeat: no-repeat;
    background-size: cover;
    transition: 500ms;
}

.sottotitolo{
    font-size: 40px;
    margin: 0;
    display: block;
    transform: translateY(40px);
    transition: 500ms;
}

.content:hover .sottotitolo{
    transition: 500ms;
    transform: translateY(0);
    opacity: 1;
}

.descrizione{
    font-size: 20px;
    margin: 0;
    display: block;
    transform: translateY(50px);
    opacity: 0;
    transition: 500ms;
    padding: 10px;
}

.content:hover .descrizione{
    transition: 500ms;
    transform: translateY(0);
    opacity: 1;
}

/* content 1 */
#container-01{
    background-image: url(./img/01.jpg);
    background-position: 0 -20px;
}

.content:hover #content-01{
    background-color: rgba(0, 0, 0, 0.6);
}

/* content 2 */
#container-02{
    background-image: url(./img/02.jpg);
    background-position: 0 -40px;
}

.content:hover #content-02{
    background-color: rgba(0, 0, 0, 0.6);
}

/* content 3 */
#container-03{
    background-image: url(./img/03.png);
}

.content:hover #content-03{
    background-color: rgba(0, 0, 0, 0.6);
}

/* content 4 */
#container-04{
    background-image: url(./img/04.jpg);
    background-position: 0 -40px;
}

.content:hover #content-04{
    background-color: rgba(0, 0, 0, 0.6);
}

#content-01, #content-02, #content-03, #content-04{
    transition: 500ms;
    background-color: rgba(0, 0, 0, 0.2);
}

#paypal-pay{
    width: 60%;
    margin: 0 20%;
}

@media screen and (max-width: 1111px) {
    #paypal-pay{
        width: 80%;
        margin: 0 10%;
    }

    .descrizione{
        display: block;
        opacity: 1;
        padding-top: 0;
        transform: translate(0px);
    }

    .sottotitolo{
        transform: translate(0px);
    }

    #container-01, #container-02, #container-03, #container-04{
        background-size: cover;
        background-position: 0 0px;
    }
    #content-01, #content-02, #content-03, #content-04{
        background-color: rgba(0, 0, 0, 0.5);
    }
}

@media screen and (max-width: 760px) {
    .sottotitolo{
        font-size: 30px;
    }

    .descrizione{
        font-size: 15px;
    }

    .content{
        margin: 2%;
    }
}