.top-tasks-header {
    position: relative;
    display: grid;
}

/* Rows */
.top-tasks-header__top,
.top-tasks-header__bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.top-tasks-header__top {
    min-height: 1rem;
    z-index: 2;
}

.top-tasks-header__bottom {
    min-height: 3rem;
    z-index: 1;
}

/* Center row */
.top-tasks-header__center {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 1rem; /* Todo: move to theme */
    z-index: 1;
}

@media (min-width: 30rem) {
    .top-tasks-header {
        grid-template-rows: 1fr auto 1fr;
    }

    .top-tasks-header__top,
    .top-tasks-header__bottom {
        min-height: 4rem;
    }
}


@media (min-width: 62rem) {
    .top-tasks-header__center[data-columns="1"] {
        grid-template-columns: calc(4 * (100% / 6));
    }

    .top-tasks-header__center[data-columns="1"].top-tasks-header__center--wide {
        grid-template-columns: 1fr;
    }

    .top-tasks-header__center[data-columns="2"] {
        grid-template-columns: calc(4 * (100% / 6)) auto;
        grid-column-gap: calc(0.5 * (100% / 6));
    }

    .top-tasks-header__center__left {
        display: flex;
        flex-direction: column;
    }

    .top-tasks-header__center__right {
        display: flex;
        flex-direction: column;
    }
}