.todo__demo {
    display: grid;
    grid-template-columns: var(--demo-gtc, 1fr);
    gap: var(--demo-g, 0.5rem);
    background: #eeeeee;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.add__todo {
    padding: .5rem;
    border: none;
    border-bottom: 2px solid var(--c-bs0);
    height: fit-content;
}

.todo__list {
    list-style: none;
}

.todo {
    cursor: pointer;
}

.todo__task {
    font-size: 1rem;
    margin-left: 0.5rem;
}

.todo:has(:checked) {
    .todo__task {
        text-decoration: line-through;
    }
}

@media (width > 512px) {
    .todo__demo {
        --demo-gtc: 1fr 1fr 2fr;
        --demo-g: 1rem;
    }
}