:root {
    --gap: 1rem;
  }
  
  .layout {
    display: grid;
    gap: var(--gap);
  }
  
  /* 4 equal columns */
  .layout-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* 2 equal columns */
  .layout-2 {
    grid-template-columns: 1fr 1fr;
  }
  
  /* 1/3 + 2/3 */
  .layout-1-2 {
    grid-template-columns: 1fr 2fr;
  }
  
  /* 2/3 + 1/3 */
  .layout-2-1 {
    grid-template-columns: 2fr 1fr;
  }
  
  /* Responsive collapse (stack on small screens) */
  @media (max-width: 768px) {
    .layout-4,
    .layout-2,
    .layout-1-2,
    .layout-2-1 {
      grid-template-columns: 1fr;
    }
  }
  

.center{
    margin: 0 auto;
}

.no-top-margin{
    margin-top: 0;
}