.top-tasks-background__image {
    --height: auto;
    --width: auto;
}

@media (min-width: 62rem) and (max-width: 74.999rem) {
    .top-tasks-background__image {
        --width: 100%;
    }

    .top-tasks-background--half .top-tasks-background__image {
        --height: 100%;
        --width: auto;
    }
}

@media (min-width: 75rem) {
    .top-tasks-background__image {
        --height: 100%;
    }
}

.top-tasks-background {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

.top-tasks-background__image {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (min-width: 30rem) {
    .top-tasks-background {
        display: block;
    }
}

@media (min-width: 62rem) {
    .top-tasks-background--half .top-tasks-background__image {
        min-width: auto;
        transform: translate(0, -50%);
    }
}

.top-tasks-background__image {
    width: var(--width, auto);
    height: var(--height, auto);
}

.top-tasks-list {
    --column-gap: 0.25rem;
    --row-gap: 0.25rem;
    --minimum-row-height__minimum-width-30-rem: 11rem;
}


@media (min-width: 30rem) {
    .top-tasks-list {
        --row-gap: 0.25rem;
    }
}

.top-tasks-list {
    display: grid;
    grid-template-columns: 1fr;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

@media (min-width: 30rem) {
    .top-tasks-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-tasks-list[data-amount="1"] {
        grid-template-columns: 1fr;
        width: 50%;
    }
}

@media (min-width: 48rem) {
    .top-tasks-list[data-amount="1"] {
        grid-template-columns: 1fr;
    }

    .top-tasks-list[data-amount="2"],
    .top-tasks-list[data-amount="3"],
    .top-tasks-list[data-amount="4"],
    .top-tasks-list[data-maximum-columns="2"][data-amount="5"],
    .top-tasks-list[data-maximum-columns="2"][data-amount="6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="3"],
    .top-tasks-list[data-maximum-columns="3"][data-amount="4"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="3"][data-amount="5"],
    .top-tasks-list[data-maximum-columns="3"][data-amount="6"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="3"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="5"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="6"]
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .top-tasks-list[data-maximum-columns="4"][data-amount="4"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="5"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="6"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="7"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="8"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .top-tasks-list[data-maximum-columns="3"][data-amount="3"]:not([data-direction="horizontal"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.top-tasks-list {
    grid-column-gap: var(--column-gap, 1rem);
    grid-row-gap: var(--row-gap, 1rem);
}

@media (min-width: 30rem) {
    .top-tasks-list {
        grid-auto-rows: minmax(var(--minimum-row-height__minimum-width-30-rem, 11rem), auto);
    }

    .top-tasks-list[data-amount="1"] {
        width: calc((100% - var(--column-gap, 1rem)) / 2);
    }
}

@media (min-width: 48rem) {
    .top-tasks-list[data-maximum-columns="2"][data-amount="1"] {
        width: calc((100% - (1 * var(--column-gap, 1rem))) / 2);
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="1"] {
        width: calc((100% - (2 * var(--column-gap, 1rem))) / 3);
    }

    .top-tasks-list[data-maximum-columns="4"][data-amount="1"] {
        width: calc((100% - (3 * var(--column-gap, 1rem))) / 4);
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="2"],
    .top-tasks-list[data-maximum-columns="3"][data-amount="4"] {
        width: calc((((100% - (2 * var(--column-gap, 1rem))) / 3) * 2) + var(--column-gap, 1rem));
    }

    .top-tasks-list[data-maximum-columns="4"][data-amount="2"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="3"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="4"] {
        width: calc((((100% - (3 * var(--column-gap, 1rem))) / 4) * 2) + var(--column-gap, 1rem));
    }

    .top-tasks-list[data-maximum-columns="4"][data-amount="3"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="5"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="6"] {
        width: calc((((100% - (3 * var(--column-gap, 1rem))) / 4) * 3) + (2 * var(--column-gap, 1rem)));
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="4"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="4"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="5"][data-direction="horizontal"],
    .top-tasks-list[data-maximum-columns="4"][data-amount="6"][data-direction="horizontal"] {
        width: 100%;
    }
}

@media (min-width: 62rem) {
    .top-tasks-list[data-maximum-columns="3"][data-amount="3"] {
        width: calc((((100% - (2 * var(--column-gap, 1rem))) / 3) * 2) + var(--column-gap, 1rem));
    }

    .top-tasks-list[data-maximum-columns="3"][data-amount="3"][data-direction="horizontal"] {
        width: 100%;
    }
}

.top-tasks-header {
    --background-color: var(--root-color-background--grey-dark);
    --grid-row-gap: 1rem; /* The gap between the TopTask-List and Contact block on small screen */
    --minimum-height: 25vw;
    --openingHoursOnTop: 0; /* 0 = no, 1 = yes */
}

@media (max-width: 29.999rem) {
    .top-tasks-header {
        --openingHoursOnTop: 1;
    }
}

@media (min-width: 30rem) {
    .top-tasks-header{
        --background-color: var(--root-color-background--grey);
    }
}
.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;
    }
}

.top-tasks-header {
    background-color: var(--background-color, #4A86FC);
}

.top-tasks-header__center {
    grid-row-gap: var(--grid-row-gap, 1rem);
}

.top-tasks-header__center__left {
    order: calc(1 + (var(--openingHoursOnTop, 0) * 1));
}

.top-tasks-header__center__right {
    order: calc(2 - (var(--openingHoursOnTop, 0) * 1));
}

@media (min-width: 30rem) {
    .top-tasks-header {
        min-height: var(--minimum-height, 25vw);
    }
}