.hightlight-btns {
    display: flex;
    gap: var(--pill-gap);
    flex-wrap: wrap;
}

.section-2-full-width {
    max-width: 100%;
}

.function-list {
    display: flex;
    flex-direction: row;
    gap: var(--medium-gap);
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
}

.function {
    background-color: var(--white-bg);
    width: 32%;
    max-width: 40rem;
    min-width: min(30rem, 80vw);
    flex-shrink: 1;
    flex-grow: 1;
    border: 1px solid var(--text-color);
}

    .function > p {
        padding: var(--pill-gap);
        margin: 0;
    }

.function-head {
    display: flex;
    flex-direction: row;
    padding: 0;
    background-color: var(--text-color);
    color: var(--gray-bg);
}

    .function-head > div {
        height: 3.6rem;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid var(--gray-bg);
    }

    .function-head > h3 {
        margin: 0 var(--pill-gap);
        padding: calc(var(--pill-gap) / 2) 0;
    }