.seasonal-calendar {
      display: grid;
      grid-template-columns: 1fr 3fr 3fr;
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
      border: 1px solid #ddd;
    }
    
    /* Grid setup for the calendar - 24 rows for half-months plus headers */
    .seasonal-calendar {
      grid-template-rows: auto repeat(24, 1fr);
      /* min-height: 800px; */
    }
    
    /* Headers styling */
    .header {
      background-color: #3a7bd5;
      font-weight: bold;
      padding: 15px 0;
      text-align: center;
      border-bottom: 2px solid #ccc;
      grid-row: 1;
    }
    
    .months-header { grid-column: 1; }
    .seasons-header { grid-column: 2; }
    .subseasons-header { grid-column: 3; }
    
    /* Months column */
    .month {
      display: flex;
      justify-content: center;
      align-items: center;
      /* padding-left: 10px;	 */
      border-bottom: 1px solid #eee;
      grid-column: 1;
    }
    
    /* Each month takes 2 rows in our grid (for half-month precision) */
    .jan { grid-row: 2 / span 2; }
    .feb { grid-row: 4 / span 2; }
    .mar { grid-row: 6 / span 2; }
    .apr { grid-row: 8 / span 2; }
    .may { grid-row: 10 / span 2; }
    .jun { grid-row: 12 / span 2; }
    .jul { grid-row: 14 / span 2; }
    .aug { grid-row: 16 / span 2; }
    .sep { grid-row: 18 / span 2; }
    .oct { grid-row: 20 / span 2; }
    .nov { grid-row: 22 / span 2; }
    .dec { grid-row: 24 / span 2; }
    
    /* Main seasons column */
    .season {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      text-align: center;
      grid-column: 2;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
    }
    
    /* Season spans: Winter (Jan-mid Mar), Spring (mid Mar-mid May),
       Summer (mid May-mid Sep), Autumn (mid Sep-mid Nov), Winter (mid Nov-Dec) */
    .winter1 {
      grid-row: 2 / 7; /* Jan + Feb + half of Mar */
      background-color: #e0f7fa; color: #006064;
    }
    
    .spring {
      grid-row: 7 / 11; /* half of Mar + Apr + half of May */
      background-color: #e8f5e9; color: #2e7d32;
    }
    
    .summer {
      grid-row: 11 / 19; /* half of May + Jun + Jul + Aug + half of Sep */
      background-color: #fff9c4; color: #f57f17;
    }
    
    .autumn {
      grid-row: 19 / 23; /* half of Sep + Oct + half of Nov */
      background-color: #e67e22;
      color: white;
      background-color: #ffebee; color: #b71c1c;
    }
    
    .winter2 {
      grid-row: 23 / 26; /* half of Nov + Dec */
      background-color: #e0f7fa; color: #006064;
    }
    
    /* Sub-seasons column */
    .sub-season {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 14px;
      grid-column: 3;
      border-bottom: 1px solid #ddd;
    }
    
    .midwinter1 {
      grid-row: 2 / 5; /* Jan + half of Feb */
      background-color: #e0f7fa; color: #006064;
    }
    
    .late-winter {
      grid-row: 5 / 7; /* half of Feb + half of Mar */
      background-color: #bbdefb; color: #0d47a1;
    }
    
    .early-spring {
      grid-row: 7 / 9;
      background-color: #c8e6c9; color: #2e7d32;
    }

    .late-spring {
      grid-row: 9 / 11;
      background-color: #dcedc8; color: #33691e;
    }
    
    .early-summer {
      grid-row: 11 / 13;
      background-color: #f0f4c3; color: #827717;
    }
    
    .midsummer {
      grid-row: 13 / 17;
      background-color: #fff9c4; color: #f57f17;
    }
    
    .late-summer {
      grid-row: 17 / 19;
      background-color: #ffe0b2; color: #e65100;
    }

    .early-autumn {
      grid-row: 19 / 21;
      background-color: #ffccbc; color: #bf360c;
    }
    
    .late-autumn {
      grid-row: 21 / 23;
      background-color: #ffcdd2; color: #b71c1c;
    }

    .early-winter {
      grid-row: 23 / 25;
      background-color: #b2ebf2; color: #006064;
    }
    
    .midwinter2 {
      grid-row: 25 / 26;
      background-color: #e0f7fa; color: #006064;
    }