.grid {
    display: grid;
    gap: 1rem; 
  }
  

  .grid.two-column {
    grid-template-columns: 1fr 1fr;
  }
  
  
  .grid.three-column {
    grid-template-columns: 1fr 1fr 1fr; 
  }
  
 
  .grid.four-column {
    grid-template-columns: 1fr 1fr 1fr 1fr; 
  }

  .grid.five-column {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
  }


  .grid-item {
    background-color: #f0f0f0; 
    padding: 1rem; 
    text-align: center; 
    border: 0.1rem solid #ddd; 
  }
  
  .span-2{
    grid-column: span 2;
  }
  .span-3{
    grid-column: span 3;
  }

  .span{
    grid-column: 1 / -1;
  }

  .centered{
    justify-self: center;
  }



  @media screen and (max-width: 48rem) {
    .grid.two-column, .grid.three-column, .grid.four-column {
      grid-template-columns: 1fr; /* Stacks all columns into a single column on smaller screens */
    }
  }
  
  @media screen and (min-width: 48.1rem) and (max-width: 64rem) {
    .grid.four-column {
      grid-template-columns: 1fr 1fr; /* Makes four-column layout into two columns on medium screens */
    }
  }
  

.flex{
  display: flex;
  gap: 10rem;
}