#big-numbers .content {
    padding: 2.5rem 1rem;
}

#carrer .content .points .point {
    --carrer-qtd-columns: 3;

    width: calc((100% - (1.5rem * (var(--carrer-qtd-columns) - 1))) / var(--carrer-qtd-columns));
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .top {
        display: flex;
        flex-direction: column;
        gap: .8rem;

        .h3 {
            font-size: 17px;
            font-weight: 500;
        }
    }

    .bottom {
        display: flex;
        flex-direction: column;
        gap: .8rem;

        .paragraphs p {
            font-size: 14px;
            color: var(--clr-dark-paragraph);
        }

        .source span {
            font-size: 13px;
            color: var(--clr-dark-paragraph);
        }
    }
}

#courses .content .courses .swiper-wrapper {
    align-items: stretch;

    .swiper-slide {
        padding-bottom: 1.5rem;
        height: auto;
    }
}

#plans .content .blocks .plan-item {
    --plans-qtd-columns: 3;

    width: calc((100% - (1.5rem * (var(--plans-qtd-columns) - 1))) / var(--plans-qtd-columns));
}

#cta .content .bottom {
    .buttons a {
        font-size: 15px;
        font-weight: 500;
        padding: .6rem 1.2rem;
        border-radius: 8px;
        border: 2px solid var(--white);

        &.solid {background-color: var(--white);}
        &.borded {color: var(--white);}
    }

    .points {
        gap: .8rem 1.2rem;

        .point {
            font-size: 13px;
            color: var(--white);
            display: flex;
            align-items: center;
            gap: .4rem;

            svg {
                width: 16px;
                height: 16px;
                fill: var(--white);
            }
        }
    }
}

@media (max-width: 1024px) {
    #carrer .content .points .point {
        --carrer-qtd-columns: 2;
    }

    #plans .content .blocks .plan-item {
        --plans-qtd-columns: 2;
    }
}

@media (max-width: 768px) {
    #carrer .content .points .point .top .h3 {text-align: start;}
}

@media (max-width: 600px) {
    #carrer .content .points {
        flex-direction: column;

        .point {
            --carrer-qtd-columns: 1;

            .top .h3 {
                font-size: 15px;
            }
        }
    }

    #plans .content .blocks .plan-item {
        --plans-qtd-columns: 1;
    }

    #cta .content .bottom .buttons {
        flex-direction: column;
        gap: .5rem;

        &, a{width: 100%;}
        a {text-align: center;}
    }
}