.highlighted {
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100px;
    ;
}

.h-space {
    width: 15%;
}

.h-content {
    display: flex;
    flex-flow: row nowrap;
    width: 70%;
    min-height: 100px;
    gap: 1rem;
    padding: var(--section-padding);
    justify-content: flex-start;
    align-items: flex-start;
}

.h-cell.main {
    min-height: 400px;
}

.h-content__main {
    display: flex;
    flex-flow: column nowrap;
    width: 60%;
    min-height: 300px;
    gap: 1rem;
}

.h-cells {
    display: flex;
    flex-flow: column nowrap;
    width: 40%;
    gap: 1rem;
}

.h-cell {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    min-height: 100px;
}

@media (768px <= width <= 991px) {
    .highlighted {
        flex-flow: column nowrap;
    }

    .h-space {
        width: 100%;
        /*min-height: 100px;*/
    }

    .h-content {
        width: 100%;
        min-height: 100px;
    }
}

@media (577px <= width <= 767px) {
    .highlighted {
        flex-flow: column nowrap;
    }

    .h-space {
        width: 100%;
        /*min-height: 100px;*/
    }

    .h-content {
        width: 100%;
        min-height: 100px;
    }
}

@media (300px <= width <= 576px) {
    .highlighted {
        flex-flow: column nowrap;
    }

    .h-space {
        width: 100%;
        /*min-height: 100px;*/
    }

    .h-content {
        width: 100%;
        min-height: 100px;
        flex-flow: column nowrap;
    }

        .h-content > * {
            width: 100%;
        }
}