.calendar {
    display: grid;
    grid-template-columns: 100px repeat(7, 1fr); /* Time column + 7 days */
    grid-template-rows: 40px;  /* First row (header) with fixed height */
    gap: 2px;  /* Spacing between cells */
    padding: 10px;
    border: 1px solid #ccc;
}

.calendar .row {
    display: contents; /* Keeps rows aligned in the grid */
}

.calendar .time {
    font-weight: bold;
    background-color: #e9e9e9;
    text-align: right;
    padding-right: 10px;
    border: 1px solid #ddd;
}

.calendar div {
    padding: 5px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

.calendar .header div {
    font-weight: bold;
    background-color: #d3d3d3;
}