.container {
    max-width: 100%;
    margin: 0 64px;
    padding: 0 15px;
  }
  
  .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
  }
  
  /* Offset classes */
  .offset-1 { --col-start: 2; }
  .offset-2 { --col-start: 3; }
  .offset-3 { --col-start: 4; }
  .offset-4 { --col-start: 5; }
  .offset-5 { --col-start: 6; }
  .offset-6 { --col-start: 7; }
  .offset-7 { --col-start: 8; }
  .offset-8 { --col-start: 9; }
  .offset-9 { --col-start: 10; }
  .offset-10 { --col-start: 11; }
  .offset-11 { --col-start: 12; }
  
  /* Column classes */
  [class*="col-"] {
    grid-column: var(--col-start, auto) / span var(--col-width);
  }
  
  .col-1 { --col-width: 1; }
  .col-2 { --col-width: 2; }
  .col-3 { --col-width: 3; }
  .col-4 { --col-width: 4; }
  .col-5 { --col-width: 5; }
  .col-6 { --col-width: 6; }
  .col-7 { --col-width: 7; }
  .col-8 { --col-width: 8; }
  .col-9 { --col-width: 9; }
  .col-10 { --col-width: 10; }
  .col-11 { --col-width: 11; }
  .col-12 { --col-width: 12; }
  
  /* Responsive breakpoints */
  @media (max-width: 1024px) {
    .row {
      gap: 20px;
    }

    .container {
      margin: 0 6px;
      padding: 0 12px;
    }
    
    .project-text .col-8{
      grid-column: 1 / -1;
      --col-width: 12;
    }

    .project-content .col-7#intro-major {
      --col-width: 9;
    }

    .project-content .offset-1#intro-major {
      --col-start: 1;
    }

    .project-content .intro {
      padding-left: 24px;
    }
  }

  /* Responsive breakpoints */
  @media (max-width: 768px) {
    .row {
      gap: 20px;
    }

    .container {
      margin: 0 6px;
      padding: 0 12px;
    }
    
    /* Stack columns on mobile */
    [class*="col-"] {
      grid-column: 1 / -1;
      --col-width: 12;
    }

    .project-content .intro {
      padding-left: 16px;
      padding-right: 16px;
    }

    #hero-content .col-3 {
      grid-column: var(--col-start, auto) / span var(--col-width);
      --col-width: 6;
    }

    .note-and-value span:nth-child(2) {
      margin-left: 2.225rem;
    }
  }
