.task {
    background-color: #d4d4d4;
    display: grid;
    grid:
        "task-header  " minmax(68px, auto) 
        "task-info    " minmax(100px, auto) 
        "task-progress" 30px 
        "task-subtask " minmax(100px, auto) 
        "task-footer  " 100px 
        / 1fr;
    padding: 5px;
    width: 510px;
 }

 .task .task-header {
    align-items: center;
    border-bottom: 2px solid #000;
    display: grid;
    grid-template-columns: 80% 1fr;
    grid-area: task-header;
 }

 .task .task-header h2 {
    border-right: 2px solid #000;
    font-size: 28px;
    margin: 0;
    padding: 20px 5px;
 }

 .task .task-header p {
    text-align: center;
 }

 .task .task-info {
    align-items: center;
    border-bottom: 2px solid #000;
    display: grid;
    grid:
        "task-info-date        task-info-type        task-info-log        " minmax(68px, auto) 
        "task-info-description task-info-description task-info-description" minmax(100px, auto) 
        / 60% 1fr 1fr;
    grid-area: task-info;
 }

 .task .task-info .task-info-date {
    font-size: 16px;
    grid-area: task-info-date;
    margin: 0;
    padding: 10px 5px;
 }

 .task .task-info .task-info-type {
    font-size: 16px;
    grid-area: task-info-type;
    margin: 0;
    padding: 10px 5px;
 }

 .task .task-info .task-info-log {
    border: 0;
    font-size: 16px;
    grid-area: task-info-log;
    margin: 2px;
    padding: 10px 5px;
 }

 .task .task-info .task-info-description {
    border-top: 2px solid #000;
    font-size: 16px;
    grid-area: task-info-description;
    margin: 0;
    padding: 10px 5px;
 }

 .task .task-progress {
    align-items: center;
    border-bottom: 2px solid #000;
    display: grid;
    grid-template-columns: 1fr;
    grid-area: task-progress;
 }

 .task .task-subtask {
    border-bottom: 2px solid #000;
    grid-area: task-subtask;
 }

 .task .task-subtask fieldset {
    margin: 20px 0;
 }

 .task .task-subtask fieldset div {
    align-items: center;
    display: grid;
    grid:
        "subtask-checkbox subtask-label  subtask-delete" minmax(auto, auto) 
        / 1fr 60% 1fr;
    margin: 10px 0;
 }

 .task .task-subtask fieldset div input {
    grid-area: subtask-checkbox;
 }

 .task .task-subtask fieldset div label {
    grid-area: subtask-label;
 }

 .task .task-subtask fieldset div .subtask-delete {
    grid-area: subtask-delete;
    border: 0;
    font-size: 16px;
    margin: 2px;
    padding: 10px 5px;
 }

 .task .task-subtask fieldset .subtask-add {
    border: 0;
    font-size: 16px;
    margin: 2px;
    padding: 10px 5px;
 }

 .task .task-footer {
    align-items: center;
    display: grid;
    grid-area: task-footer;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
 }

 .task .task-footer button {
    border: 0;
    font-size: 16px;
    margin: 2px;
    padding: 10px 5px;
 }

 .task .task-log-dialog {
    width: 500px;
 }