#plans {
    padding: 3rem;
    text-align: center;
}
#plans h2 {
    margin-bottom: 2rem;
}
.cards-container-1,
.cards-container-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 1rem;
    padding: 2rem;
}
.cards-container-1 .card:nth-child(2) {
    background: linear-gradient(-45deg, #ffec61, #f321d7);
}
.cards-container-1 .card:nth-child(3) {
    background: linear-gradient(-45deg, #9a4eff, #24ff72);
}
.see-more-plans-btn {
    background: linear-gradient(to right, #fc466b, #3f5efb);
    padding: .7rem 3rem;
    border-radius: 5px;
    border: none;
    color: white;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
}
.see-more-plans-btn::after {
    content: 'Ver Mais';
}
.see-more-plans-btn.active::after{
    content: 'Ver Menos';
}
.cards-container-2 {
    transition: all .8s ease;
    padding: 0;
    height: 0;
    overflow: hidden;
}
.cards-container-2.active {
    padding: 2rem;
    height: 35rem;
}
.cards-container-2 .card:first-child {
    background: #FEAC5E;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top left, #4BC0C8, #C779D0, #FEAC5E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.cards-container-2 .card:last-child {
    background: #FF0099;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #493240, #FF0099);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top left, #493240, #FF0099); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

@media screen and (max-width:768px) {
    #plans {
        padding: 3rem 1rem;
    }
    .cards-container-1{
        padding: 1rem;
    }
    .cards-container-2 {
        overflow-x: visible;
    }
    .cards-container-2.active {
        padding: 1rem;
        height: 69rem;
    }
    .cards-container-1 .card {
        margin-top: 3rem;
    }
    .cards-container-1 .card:first-child {
        margin-top: 0;
    }
    .cards-container-2 .card:last-child {
        margin-top: 3rem;
    }
}