.animation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /*background-image: linear-gradient(#092581, #f5f3ef);*/
    background-color: #f5f3ef;
}

.content-container {
    background-color: #f5f3ef;

}


.card-orange {
    background: radial-gradient(circle,
            rgba(240, 90, 40, 1) 0%,
            rgba(240, 90, 40, 0.6) 5%,
            rgba(240, 90, 40, 0) 100%);
    padding: 40px;
    border-radius: 20px;
    display: inline-block;
    margin: 20px 0;
    width: calc(40vi + 80px);
    max-width: 880px;
}

.card-blue {
    background: radial-gradient(circle,
            rgba(62, 89, 168, 1) 0%,
            /* #3E59A8 at 100% opacity */
            rgba(62, 89, 168, 0.6) 5%,
            /* #3E59A8 at 60% opacity */
            rgba(62, 89, 168, 0) 100%
            /* #3E59A8 fully transparent */
        );

    padding: 40px;
    border-radius: 20px;
    display: inline-block;
    margin: 20px 0;
    width: calc(40vi + 80px);
    max-width: 880px;
}


.card-green {
    background: radial-gradient(circle,
            rgba(0, 147, 69, 1) 0%,
            /* #009345 at 100% opacity */
            rgba(0, 147, 69, 0.6) 5%,
            /* #009345 at 60% opacity */
            rgba(0, 147, 69, 0) 100%
            /* #009345 fully transparent */
        );

    padding: 40px;
    border-radius: 20px;
    display: inline-block;
    margin: 20px 0;
    width: calc(40vi + 80px);
    max-width: 880px;
}




@media (max-width: 992px) {
    .card-orange {
        width: 95vi;
        padding: 20px;
        margin: 10px 0;
    }

    .card-blue {
        width: 95vi;
        padding: 20px;
        margin: 10px 0;
    }

    .card-green {
        width: 95vi;
        padding: 20px;
        margin: 10px 0;
    }
}