#story .content .title-heading .paragraphs {gap: .9rem;}

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

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

    .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);
        }
    }
}

#certificate .content {
    .title-heading .icon svg {
        width: 64px;
        height: 64px;
        fill: var(--primary);
    }

    .comparisons {
        border: 1px solid rgba(0, 0, 0, .3);
        padding: 1.5rem 1rem;

        .table {
            tr th, tr td{
                text-align: start;
                padding: .4rem 1rem;
                width: calc(100% / 2);
            }

            thead tr th {font-weight: 600;}

            tbody tr td {
                color: var(--clr-dark-paragraph);
                font-size: 15px;

                svg {
                    width: 18px;
                    height: 18px;
                    fill: var(--primary);
                }

                &:first-child svg {fill: var(--clr-success);}
            }
        }
    }
}

@media (max-width: 1024px) {
    #story .content {
        flex-direction: column;
        gap: 2rem;

        .part {
            width: 100%;

            &.title-heading {
                &, .paragraphs {align-items: center;}

                .h2, p {text-align: center;}
            }
        }
    }

    #values .content .points .point {--values-qtd-columns: 2;}
}

@media (max-width: 768px) {
    #header .content .texts .top .heading .h1 {font-size: 28px;}

    #values .content .points .point .top h3 {text-align: start;}

    #certificate .content .comparisons {
        overflow-x: scroll;
        justify-content: start;

        .table tr {
            th, td {text-wrap: nowrap;}
        }
    }
}

@media (max-width: 600px) {
    #story .content .image img {height: auto;}

    #values .content .points {
        gap: 1rem;

        .point {--values-qtd-columns: 1;}
    }
}