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


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

.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(2, 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[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));
    }
}

.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%;
    }
}