.highlights .icon {
    width: min(150px, 100%);
    filter: invert(1);
    margin: auto;
}

.highlights {
    display: flex;
    flex-flow: row wrap;
}

.highlights .highlight-card {
    display: flex;
    flex: 1 1 100%;
}

.highlights .highlight-card>div {
    --br: 1rem;
    margin: 1rem;
    padding: 1.5rem;
    position: relative;
    border-radius: var(--br);
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
}

.highlights .highlight-card>div::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: var(--br);
    background-color: var(--c4);
    opacity: 0.05;
    z-index: -1;
    transition: all ease 300ms;
}

.highlights .highlight-card>div:hover::after {
    opacity: 1;
    background-color: var(--c2);
}

.highlights .highlight-card>div img {
    transform-origin: bottom;
    transition: all cubic-bezier(0.82, -0.5, 0.24, 1.63) 400ms;
}

.highlights .highlight-card>div:hover img {
    transform: scale(1.1);
}

.highlights .highlight-card h3 {
    margin-top: 1.5rem;
}

.highlights .highlight-card p {
    margin-bottom: 0;
}

@media screen and (min-width: 768px) {
    .highlights .highlight-card {
        flex-basis: 50%;
    }
}

@media screen and (min-width: 992px) {
    .highlights .highlight-card {
        flex-basis: 33%;
    }
}