.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    display: flex;
    align-items: center;
    z-index: 100;
    justify-content: space-between;
}

.desktop {
  min-height: calc(100vh - 36px); /* full height minus taskbar */
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 4 equal columns */
  grid-auto-rows: 20px;
  gap: 10px;
  align-content: start; /* cards stack from top, don't stretch to fill */
}

/* Span helpers — add these classes to your cards */
.span-1  { grid-column: span 1; }
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }   /* quarter width */
.span-4  { grid-column: span 4; }   /* third width */
.span-6  { grid-column: span 6; }   /* half width */
.span-8  { grid-column: span 8; }   /* two thirds */
.span-9  { grid-column: span 9; }   /* three quarters */
.span-12 { grid-column: span 12; }  /* full width */